I know you can populate a form dropdown with data from a database based on the selection of another dropdown with Ajax.
I don’t have any experience with Ajax, but I need to get this project done for my work.
If anyone cane help me with this I’d really appreciate it.
Here is the code for my first dropdown.
<?php
$flight_sql = "SELECT * FROM wp_flr_flights";
$flight_result = mysql_query($flight_sql);
echo '<select name="location">';
while ($flt_loc_rows = mysql_fetch_assoc($flight_result)) {
$loc_id = $flt_loc_rows["location_id"];
$loc_name = $flt_loc_rows["location_name"];
echo ''<option value="'.$loc_id.'">'.$loc_name.'</option>'';
}
echo '</select>';
?>
So what I want to happen, is when the dropdown is selected the next three dropdowns on the form are populated based in the $loc_id variable.
SO every row in the table with (let’s say) and $loc_id of 1. The form gets populated on with information from those rows.
I hope that make sense. I apologize if I posted in the wrong area. I’m not sure if this should be PHP or JavaScript.
Thanks in advanced
OK, I found a tutorial online that I mostly understand but the javasrcript doesn’t seem to work.
here’s the code
<script>
function changeSecond(first){
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var res=xmlhttp.responseText;
document.getElementById("second").innerHTML=res;
}
}
xmlhttp.open("GET","reservations-plane.php?first="+first,true);
xmlhttp.send();
}
</script>
<?php
$flight_sql = "SELECT * FROM wp_flr_flights";
$flight_result = mysql_query($flight_sql);
echo '<select name="location" id="select-location onChange="changeSecond(this.value)">';
echo '<option value="">Select</option>';
while ($flt_loc_rows = mysql_fetch_assoc($flight_result)) {
$loc_id = $flt_loc_rows["location_id"];
$loc_name = $flt_loc_rows["location_name"];
echo '<option value="'.$loc_id.'">'.$loc_name.'</option>';
}
echo '</select>';
?>
<div id="second"><select><option value=""></option></select></div>
reservations-plane.php
<?php
global $wpdb, $page_url;
$location=mysql_real_escape_string($_REQUEST["first"]);
echo $userid.'ddd';
$flight_sql = "SELECT ".$location." FROM wp_flr_flights GROUP BY ".$location;
$flight_result = mysql_query($flight_sql);
echo '<select name="plane_type_choose">';
while ($flt_plane_rows = mysql_fetch_row($flight_result)) {
$plain_id = $flt_plane_rows["plane_id"];
$plane_type = $flt_plane_rows["plane_type"];
echo '<option value="'.$flt_plane_rows[0].'">'.$flt_plane_rows[0].'</option>';
}
echo '</select>';
?>
Like I said this seems simple enough to understand, but the Javascript isn’t working. I even stuck an alert in there but couldn’t get it to work.
Any ideas about this?