interlinked dropdown list is not working - php

i am working with interlinked dropdown list i.e on selection of one dropdown list ajax call generated and populated another dropdown list and so on.
So my problem is with data coming from server side,on selection of each dropdown list i want to filter the available-results also,but the data that coming from server side get appended to show div i.e dropdown-list items and results-items.i only want to append results-items to show div.
client side code
var country_code = $(this).val();
console.log(country_code);
if(country_code){
$('#loadingmessage').show();
$.ajax({
type:'POST',
url:'dependent.php',
data:'country_code='+country_code,
success:function(html){
console.log(html);
$('#state').html(html);
$('#city').html('<option value="">Select state first</option>');
$('#results').html(html);
$('#loadingmessage').hide();
}
});
}else{
$('#state').html('<option value="">Select country first</option>');
$('#city').html('<option value="">Select state first</option>');
}
});
server side code
if(isset($_POST["country_code"]) && !empty($_POST["country_code"])){
$id = 1;
$code = $_POST['country_code'];
$code = mysqli_real_escape_string($conn,$code);
$query = "SELECT * FROM plus2_state WHERE country_code = '$code' ORDER BY state ASC";
$result = mysqli_query($conn,$query) or die(mysqli_error($conn));
$rowCount = mysqli_num_rows($result);
if($rowCount > 0){
while($row = mysqli_fetch_array($result)){
echo '<option class="state_option" value="'.$row['state_id'].'">'.$row['state'].'</option>';
}
}else{
echo '<option class="state_option" value="">State not available</option>';
}
$query_1 = "SELECT * from content where country_code = '$code' ORDER BY emp_name ASC";
$result_1 = mysqli_query($conn,$query_1) or die(mysqli_error($conn));
$row_count = mysqli_num_rows($result_1);
$_SESSION['result'] = array();
if($row_count > 0 )
{
while($content_rows = mysqli_fetch_array($result_1))
{
unset($_SESSION['result']);
echo "<div class='result'><div class='col-md-3 photo-grid' style = 'float:left'>
<div class = 'well well-sm'><h4><small>".$content_rows['emp_name']."</small></h4></div></div></div>";
$_SESSION['result'][$id] = array('name' => $content_rows['emp_name']);
}
}
else
{
echo "<div class = 'result'>no results found</div>";
}
$_SESSION['country_code'] = $code ;
//print_r($_SESSION['result']);
}

Related

Populating 3 dropdown using ajax, one after the other

I currently have this code that populates one dropdown using the value from previous dropdown, my problem now is how will I populate the 3rd dropdown using the result from the 2nd dropdown that was provided by the first dropdown?
This the current code.
accounttype will be the first dropdown.
accountcode will be the second dropdown based on the result of accounttype.
accounttitle should be the third dropdown based on the result of accountcode .
<div class="">
<label>accounttype :</label>
<select name="accounttype" id="accounttype">
<option value=''>------- Select --------</option>
<?php
$sql = "SELECT DISTINCT accounttype from earningsamendmentaccount";
include 'query/sqlsrv_query-global.php';
if(sqlsrv_num_rows($query) > 0) {
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)) {
echo "<option value='".$row['accounttype']."'>".$row['accounttype']."</option>";
}
}
?>
</select>
<label>accountcode :</label>
<select name="accountcode" id="accountcode"><option>------- Select --------</option></select>
<label>accounttitle :</label>
<select name="accounttitle" id="accounttitle"><option>------- Select --------</option></select>
</div>
This is currently my ajax. This is within the same pag as my <div>
<script>
$(document).ready(function() {
$("#accounttype").change(function() {
var accounttype = $(this).val();
if(accounttype != "") {
$.ajax({
url:"earnings_amendment-employee_select.php",
data:{accountcode:accounttype},
type:'POST',
success:function(response) {
var resp = $.trim(response);
$("#accountcode").html(resp);
}
});
} else {
$("#accountcode").html("<option value=''>------- Select --------</option>");
}
});
});
</script>
This is my earnings_amendment-employee_select.php .
<?php
include 'includes/session.php';
if(isset($_POST['accountcode'])) {
$accountcode=$_POST['accountcode'];
$sql = "select accountcode, accounttitle from earningsamendmentaccount where accounttype='$accountcode'";
$query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
if(sqlsrv_num_rows($query) > 0) {
echo "<option value=''>------- Select --------</option>";
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)) {
echo "<option value='".$row['accountcode']."'>".$row['accountcode']."</option>";
}
}
} else {
header('location: ./');
}
?>
What would be the best approach to do this to populate my third dropdown column? I tried creating a separate ajax for accounttitle but it didn't work.
have you tried
$('#your_second_dropdown').on('change', ()=> {
// your code here...
})

add option value dynamically

I have a select with MySQL option values. My problem is with that if I have more then 1 value in the table, it's alway prints one option. How can I add dynamically more option value if an Employee has more then 1 company?
For example: modal
It has 2 company and I want to print all of the company he has, not just 1. How can I do this?
I print the current MySQL datas in the fetch.php.
index.php
<label>Company:</label>
<select name="company" id="company" class="form-control">
<?php
$query2 = "SELECT * FROM company GROUP BY company_id";
$result2 = mysqli_query($connect, $query2);
while($row2= mysqli_fetch_array($result2)){
?>
<option value="<?php echo $row2['company_id'];?>"><?php echo $row2['company_name'];?></option>
<?php
}
?>
</select>
<script>
$(document).on('click', '.edit_data', function(){
var employee_id = $(this).attr("id");
$.ajax({
url:"fetch.php",
method:"POST",
data:{'employee_id':employee_id},
dataType:"json",
success:function(data){
$('#company').val(data.company);
}
});
});
</script>
fetch.php
if(isset($_POST["employee_id"]))
{
$query = "SELECT employee.id AS id, employee.name AS name, employee.address AS address, company.company_id AS company
FROM employee
LEFT JOIN employee_company ON employee.id = employee_company.employee_id
LEFT JOIN company ON company.company_id = employee_company.company_id
WHERE employee.id = '".$_POST["employee_id"]."'";
$result = mysqli_query($connect, $query);
$row = mysqli_fetch_array($result);
echo json_encode($row);
}
First of all, you can't select multiple options from a dropdown menu. You need to use a multi-select.
<select name="company" id="company" class="form-control" multiple>
<?php
$query2 = "SELECT * FROM company GROUP BY company_id";
$result2 = mysqli_query($connect, $query2);
while($row2= mysqli_fetch_array($result2)){
?>
<option value="<?php echo $row2['company_id'];?>"><?php echo $row2['company_name'];?></option>
<?php
}
?>
</select>
Then you need to change fetch.php return an array of all the company IDs:
if(isset($_POST["employee_id"]))
{
$query = "SELECT employee.id AS id, employee.name AS name, employee.address AS address, company.company_id AS company
FROM szerepek
LEFT JOIN employee_company ON employee.id = employee_company.employee_id
LEFT JOIN company ON company.company_id = employee_company.company_id
WHERE employee.id = '".$_POST["employee_id"]."'";
$result = mysqli_query($connect, $query);
if (mysqli_num_rows($result) == 0) {
echo json_encode(null);
} else {
$companies = array();
while ($row = mysqli_fetch_assoc($result)) {
$companies[] = $row['company'];
}
$row['companies'] = $companies;
echo json_encode($row);
}
}
and change the Javascript to loop through them and select all of them.
$(document).on('click', '.edit_data', function(){
var employee_id = $(this).attr("id");
$.ajax({
url:"fetch.php",
method:"POST",
data:{'employee_id':employee_id},
dataType:"json",
success:function(data){
if (data) {
$("#company").val(data.companies);
}
}
});
});

Ajax multiple onchange dynamic dependent select box

would really appreciate your help on below issue. I have 3 dynamic dependent dropdowns. Scheme 1 is working when: Click Dropdown (Dd) 1=>Values change in Dd2=>Values change in Dd3. But I need Dd3 to be also dependent on Dd1 & Dd2.
I have ajax code and suppose it has mistakes:
$(document).ready(function(){
$('#country', '#state').on('change',function(){
var countryID = $('#country').val();
var stateID = $('#state').val();
if(countryID, stateID){
$.ajax({
type:'POST',
url:'search_city.php',
data: "country_id="+countryID+"&state_id="+stateID,
success:function(html){
$('#city').html(html);
}
});
}else{
$('#city').html('<option value="">Select state first</option>');
}
})
});
ADDING PHP FILE:
<?php
include('connect.php');
if (isset($_POST["country_id"] || isset($_POST["state_id"]))) {
$query = $conn->query("SELECT * FROM city WHERE country_id =
".$_POST['country_id']." AND state_id = ".$_POST['state_id']." ORDER BY
city_name");
$rowCount = $query->num_rows;
if($rowCount > 0){
echo '<option value="">Select city</option>';
while($row = $query->fetch_assoc()){
echo '<option
value="'.$row['city_id'].'">'.$row['city_name'].'</option>';
}
}else{
echo '<option value="">City not available</option>';
}
}
?>

insert value of select form into mysql

I have a form that adds vehicles to a database, there are 2 drop down select fields in the form, 'Make' and 'Model'
When I select an option from either one to insert it into the stock table in the database the make 'ID' or model 'ID' gets inserted into vehicle make / model rather than the name of the vehicle make, so '3' gets inserted instead of 'Volkswagen'
Here is some of my code
<form action="addstock.php" method="post" enctype="multipart/form-data">
<div class="make">
<div id="field1">Make:</div> <div id="field2">
<select name="mke" id="mke">
<?php
include 'includes/db2.php';
$SQL = "SELECT * FROM make";
$query = mysqli_query($con, $SQL);
while ($row = mysqli_fetch_array($query)) {
$res = "<option ";
$res .= "value='".$row['code']."'>";
$res .= $row['vehicle_make'];
$res .= '</option>';
echo $res;
}
?>
</select>
</div>
</div>
</div>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$('#mke').change(function(){
var code = $(this).val();
var data = 'code='+code;
$.ajax({
type : "POST",
url : "fill.php",
data : data,
cache: false,
success: function(html)
{
$('#mdl').html(html);
}
});
});
});
</script>
Code for the model drop down option, the rest of the code for this is on another page (fill.php)
<div id="field1">Model:</div> <div id="field2">
<select name="mdl" id="mdl">
<option selected="selected">Model</option>
</select>
</div>
</div>
fill.php page
if(isset($_POST['code']))
{
$SQL = "SELECT * FROM model WHERE MakeCode = '".$_POST['code']."'";
$query = mysqli_query($con, $SQL);
if(mysqli_num_rows($query) == 0 )
{
echo '<option>No Results</option>';
} else {
while ($row = mysqli_fetch_array($query)) {
$res = "<option ";
$res .= "value='".$row['id']."' >";
$res .= $row['vehicle_model'];
$res .= "</option>";
echo $res;
}
}
} else {
echo '<option >error</option>';
}
?>
Back on the addstock.php page here is the insert code
<?php
if(isset($_POST['addstock'])){
$mke = $_POST['mke'];
$mdl = $_POST['mdl'];
$addstock = "insert into stock (veh_make,veh_model) values('$mke','$mdl')";
$addsto = mysqli_query($con, $addstock);
if($addsto){
echo "<script>alert('Vehicle has been added')</script>";
echo "<script>window.open('addstock.php','_self')</script>";
}
}
I'm fairly new to php and not sure how to insert the name instead of the id, as when I am trying to display a vehicle on another page the ID's show like 3 4, instead of Volkswagen Golf
Hope you understand what I mean
Any help is much appreciated!
You can insert the result of a SELECT statement that gets you the make and model:
"insert into stock (veh_make,veh_model) select make.vehicle_make, vehicle_model FROM make, model WHERE make.id=$mke AND model.id=$mdl"
But this is wrong DB design. stock should not contain make and model names, but rather IDs, references to rows in other tables, or Foreign Keys.

How to get data in checkboxes from dropdown list in Ajax/Jquery

I am not posting here complete code yet I want an idea how to retrieve data in checboxes based on a dropdown list. I have a dropdownlist of users, and pages data in checkboxes.
Suppose table user have two columns (user_id, user) and pages have three columns (page_id, user_id, title).
I wish these cheboxes automatic check/uncheck acording to selected user without refreshing page. Suppose I am fetching users as
echo '<select name="user_id">';
echo '<option value="">Select User</option>';
$sql = "SELECT * from users";
$res = mysql_query($sql);
while($row = mysql_fetch_assoc($res)) {
$uid = $row['user_id'];
$user = $row['user'];
echo '<option value="'.$uid.'">'.$user.'</option>';
}
echo '</select>';
And data in checkboxes on the basis of selected user (make sure user_id is compared in IF condition but not in query)
$user_id = $_POST['user_id']; //selected user from list
$query = "SELECT * from pages";
$result = mysql_query($query);
while($rowPage = mysql_fetch_assoc($result)) {
$upid = $rowPage['user_id'];
$pid = $rowPage['page_id'];
$title = $rowPage['title'];
if($upid == $user_id) {
echo '<input type="checkbox" name="userPages[]" value="'.$pid.'" checked="checked"> '.$title;
} else {
echo '<input type="checkbox" name="userPages[]" value="'.$pid.'"> '.$title;
}
}
How is it possible in Ajax/Jquery I mean without refreshing page.
Hope you understand what I mean.
Thanks
here is the asnwer what you can do is like this
echo '<select name="user_id" id="userCombo">';
echo '<option value="">Select User</option>';
$sql = "SELECT * from users";
$res = mysql_query($sql);
while($row = mysql_fetch_assoc($res)) {
$uid = $row['user_id'];
$user = $row['user'];
echo '<option value="'.$uid.'">'.$user.'</option>';
}
echo '</select>';
echo '<div id="userCheckBoxes"></div>'
Now put the ajax call on the change event of the select box.
I am here going to use jquery ajax.
<script type="text/javascript">
$(document).ready(function()
{
$("#userCombo").change(function()
{
var id=$(this).val();
var dataString = 'user_id='+ id;
$.ajax
({
type: "POST",
url: "ajax_checkboxes.php",
data: dataString,
cache: false,
success: function(html)
{
$("#userCheckBoxes").html(html);
}
});
});
});
</script>
Now make ajax_checkboxes.php into same directory.
then put your below code into the ajax_checkboxes.php. I assume you can make database connectivity and all by your self.
$user_id = $_POST['user_id']; //selected user from list
$query = "SELECT * from pages";
$result = mysql_query($query);
while($rowPage = mysql_fetch_assoc($result)) {
$upid = $rowPage['user_id'];
$pid = $rowPage['page_id'];
$title = $rowPage['title'];
if($upid == $user_id) {
echo '<input type="checkbox" name="userPages[]" value="'.$pid.'" checked="checked"> '.$title;
} else {
echo '<input type="checkbox" name="userPages[]" value="'.$pid.'"> '.$title;
}
}
I did not taste it on my local server but I am sure It will work.
PS dont for get to include jQuery on the head section of your site.

Categories