Unable to Populate Dynamic Drop Down List Using AJAX Request on PHP
Question
Good day,
I have multiple drop down list that I must populate using AJAX Request but I was unable to do it.
I don't know where is my error because I'm new in using AJAX. I was able to research in the internet but unluckily I can't fully understand their explanation.
Can someone explain to me.. What Am I doing wrong here.
Advance thanks to those who will reply to my thread.
By the way these are my codes on my encoding page.
<html>
<head>
<script type="text/javascript">
function populateDropDown(choice){
var httpxml;
try{
httpxml = new XMLHttpRequest();
}
catch (e){
try {
httpxml = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
httpxml = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateChanged(){
if (httpxml.readystate==4){
var myObject = JSON.parse(httpxml.responseText);
for (j=document.get_forms.province.options.length-1;j>=0;j--){
document.get_forms.province.remove(j);
}
var province1=myObject.value.province1;
var optn = document.createElement("OPTION");
optn.text = 'Select Region First';
optn.value = '';
document.get_forms.province.options.add(optn);
for(i=0;i<myObject.province.length;i++){
var optn = document.createElement("OPTION");
optn.text = myObject.province[i];
optn.value = myObject.province[i];
document.get_forms.province.options.add(optn);
if (optn.value==province1){
var k = i + 1;
document.get_forms.province.options[k].selected=true;
}
}
for (j=document.get_forms.municipality.options.length;j>=0;j--){
document.get_forms.municipality.remove(j);
}
var municipality1 = myObject.value.municipality1;
for (i=0;i<myObject.municipality1.length;i++){
var optn = document.createElement("OPTION");
optn.text = myObject.municapility[i];
optn.value = myObject.municipality[i];
document.get_forms.municipality.options.add(optn);
if (optn.value==municapility1){
document.get_forms.municipality.options[i].selected = true;
}
}
for (j=document.get_forms.barangay.options.length;j>=0;j--){
document.get_forms.barangay.remove(j);
}
var barangay1 = myObject.value.barangay1;
for (i=0;i<myObject.barangay1.length;i++){
var optn = document.createElement("OPTION");
optn.text = myObject.barangay[i];
optn.value = myObject.barangay[i];
document.get_forms.barangay.options.add(optn);
if (optn.value==barangay1){
document.get_forms.barangay.options[i].selected = true;
}
}
var url = "populate.php";
var region = get_forms.region.value;
if (choice != 's1'){
var province = get_forms.province.value;
var municipality = get_forms.municipality.value;
var barangay = get.forms.barangay.value;
}
else{
var province = '';
var municipality = '';
var barangay = '';
}
url = url + "?region="+region;
url = url + "&province="+province;
url = url + "&municipality="+municipality;
url = url + "$barangay="+barangay;
url = url + "&id="+Math.random();
get_forms.st.value = province;
httpxml.onreadystatechange = stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);
}
}
}
</script>
</head>
<fieldset>
<form name='get_forms' action='get_forms.php' method='post'>
Region : <select name='region' id='region_id' onChange="populateDropDown(s1);" required>
<option value=''> Please Select A Region</option>
<?php
require 'config.php';
$sql='SELECT DISTINCT region FROM roster';
foreach ($conn->query($sql) as $row) {?>
<option value="<?php echo $row['region'];?>"><?php echo $row['region'];?></option>
<?php }
?>
</select>
<br><br>
<input type=text name=st value=0><br><br>
Province : <select name='province' id='province_id' onChange="populateDropDown(s2);" required>
<option value="">Please Select Region First</option>
</select>
<br><br>
Municipality : <select name='municipality' id='municipality_id' onChange="populateDropDown(s3);" required>
<option value="">Please Select Province First</option>
</select>
<br><br>
Barangay : <select name='barangay' id='barangay_id' onChange="populateDropDown(s4);" required>
<option value=""> Please Select Municipality First </option>
</select>
<br><br>
Period: <select name='period' id='period_id' required>
<option value=''> Please Select Compliance Period </option>
<?php
require 'config.php';
$sql='SELECT DISTINCT period FROM compliance';
foreach($conn->query($sql) as $row){?>
<option value="<?php echo $row['period'];?>"><?php echo $row['period'];?></option>
<?php }
?>
</select>
<br><br>
Form Type: <select name='form_type' id='form_type_id' required>
<option value=''> Select Form Type </option>
<?php
require 'config.php';
$sql='SELECT DISTINCT form_type FROM compliance ORDER BY form_type ASC';
foreach($conn->query($sql) as $row){?>
<option value="<?php echo $row['form_type'];?>"><?php echo $row['form_type'];?></option>
<?php }
?>
</select>
<br><br>
<input type='submit' value='GET FORMS'>
</form>
</fieldset>
And these are my codes in my populate.php Page.
<?php
require 'config.php'
$region = $_GET['region'];
$province1 = $_GET['province'];
$municipality1 = $_GET['municipality'];
$barangay1 = $_GET['barangay'];
$sql_prov = "SELECT DISTINCT province FROM roster WHERE region ='$region'";
$query=$conn->prepare($sql_prov);
$query->execute();
$province= $query->fetchALL(PDO::FETCH_COLUMN);
$sql_mun = "SELECT DISTINCT municipality FROM roster WHERE province = '$province1";
$query=$conn->prepare($sql_mun);
$query->execute();
$municipality = $query->fetchALL (PDO::FETCH_COLUMN);
$sql_bar = "SELECT DISTINCT barangay FROM roster WHERE municipality = '$municipality1' AND province = '$province1'";
$query=$conn->prepare ($sql_bar);
$query->execute();
$barangay = $query->fetchALL (PDO::FETCH_COLUMN);
$main = array('province'=>$province,'municipality'=>$municipality,'barangay'=>$barangay,'value'=>array("province1"=>"$province1","municipality1"=>"$municipality1","barangay1"=>"$barangay1"));
echo json_encode($main);
?>
1 answers
solution1
0 2016-09-01 02:15:30
I just give you some idea how Ajax work. and you need to change the output of Ajax.php to return your options from database.
<select id="select1">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select id="select2">
</select>
<select id="select3">
</select>
<script type="text/javascript">
$(document).on('change', "#select1", function()
var variable = $("#select1").val();
var action = 'get_select2_options';
$.ajax({
type: "post",
url:"ajax.php",
data:{action:action: variable:variable},
success: function(data){
$("#select2").html(data);
}
});
});
$(document).on('change', "#select2", function()
var variable = $("#select2").val();
var action = 'get_select3_options';
$.ajax({
type: "post",
url:"ajax.php",
data:{action:action: variable:variable},
success: function(data){
$("#select3").html(data);
}
});
});
</script>
AJAX:
<?php
if($_POST['action']=='get_select2_options'){
echo '<option>2-1</option><option>2-2</option>';
}
if($_POST['action']=='get_select3_options'){
echo '<option>3-1</option><option>3-2</option>';
}
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Dynamic drop down list using html and php
Populate a drop down list using knockout and an AJAX call to database
Trying to populate a drop down list with jquery and ajax
populate 2nd drop down based on 1st drop down result by using ajax in codeigniter php
dynamic country hotel Category drop down using ajax in php
Using jQuery, JSON and AJAX to populate a drop down
having issues while trying to populate second drop down-list dynamically using AJAX
Dynamic drop down menu using AJAX
PHP Ajax call to clear and populate a drop down menu
How to correctly populate a drop down list via ajax and MVC controller
Related Tags