Help with auto populating a dropdown for form

[jawittdesigns]

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

[jawittdesigns]

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?