How to populate dependable drop-down using Ajax and php [closed] - php

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Hi i want to manage data on drop-down menu using Ajax.
Databse Fields:
1.id
2.name
3.department
myDesgin.php
<select id="id"></select>
<select id="name"></select>
<select id="department"></select>
1.If i selected one drop-down menu want to change another drop-downs depend on selected value using Ajax.
2.Is there any code available, if i select one drop-down it go to another child window and display data as in table format(like report) using Ajax.
Thanks in Advance.
Please give me example code, because i am beginner to ajax , most welcome if someone provide explanation with code(for ajax).

Answer 1

Yes, check following jquery ajax code.
In this example, if you change "Department" then it will populate the listing of "Name" dropdown.
$(document).on("change", '#department', function(e) {
var department = $(this).val();
$.ajax({
type: "POST",
data: {department: department},
url: 'admin/users/get_name_list.php',
dataType: 'json',
success: function(json) {
var $el = $("#name");
$el.empty(); // remove old options
$el.append($("<option></option>")
.attr("value", '').text('Please Select'));
$.each(json, function(value, key) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
}
});
});

Answer 2

I guess you can do this:
make a global function which accepts two args, currElem, nextElem and dataObj:
function dynoDropdowns(currElem, nxtElem, dataObj){
$.ajax({
url:"path/to/file",
type:"post",
data:dataObj,
dataType:"json", // <-------------expecting json from php
success:function(data){
$(nxtElem).empty(); // empty the field first here.
$.each(data, function(i, obj){
$('<option />',
{
value:obj.value,
text:obj.text
}
).appendTo(nxtElem);
});
},
error:function(err){
console.log(err);
}
});
}
now your change events are:
$(function(){
$('select').on('change', function(e){
if(this.id === "id"){
var dataObj = {id:this.value};
dynoDropdowns(this, '#name', dataObj);
}else if(this.id === "name"){
var dataObj = {name:this.value};
dynoDropdowns(this, '#department', dataObj);
}
});
});

Answer 3

given select1 and select2 like this:
<select id="select1">
<option id="11" value="x">X</option>
<option id="12" value="y">Y</option>
</select>
<select id="select2">
<option id="21" value="1">1</option>
<option id="22" value="2">2</option>
</select>
then you can do something like this with jQuery:
$('#select1').on('change', function() {
$.ajax({
url: "test.html",
}).done(function(response) {
$('#select2').html(response);
});
This assumes your ajax call returns a string like
<option id="21" value="3">3</option><option id="22" value="4">4</option>
from your server sided file. If you return a json you have to decode it first, but this is the general gist of it. Take a look at the jQuery ajax() function

Answer 4

Although there are many codes available out there. I am writing most easy and basic code for you.
HTML
<select id="id" onchange="update_name(this.id)"></select>
AJAX Code
function update_name(id)
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txt").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","update_data.php?q="+id,true);
xmlhttp.send();
}
update_data.php (PHP code)
<?php
if(isset($_GET['q'])
{
$id= $_GET['q'];
//based on id run your query
}