Dynamic Dependant Dropdown menu with ajax php mysql

Question

I am attempting to make dynamic dropdown boxes a search tool to help narrow down display data from a mysql server. I am a decent php programmer but need help with the javascript and ajax.

The site currently consists of 3 pages: index_test.php, dropdown.php and dropdown2.php.

On index_test.php there are 4 dropdown menus that need to be populated with information. The first is populated with state names from a mysql table using php when the page loads. The second box is populated using .change() that references php code and and displays schools in the selected state from a mysql table. The third box is supposed to then take the selected value from the second box and display the class names from the selected school to the user and that step is where the code is breaking. The php works when tested by submitting the form but I would like to be able to fill the last 2 boxes without a page refresh. The format of the mysql tables are: table schools: (school_id, schools, states) table classes: (class_id, school_id, class_abrv, class_number)

Thank you for your help

The code for index_test.php:

<?php include_once("connect.php"); ?>
<html>
<head>
<title>ajax</title>
<script src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#state").change(function(){
var state = $("#state").val();
$.ajax({
type:"post", 
url:"dropdown.php", 
data:"state="+state, 
success: function(data) {
$("#school").html(data);
}
});
});

$("#school").change(function(){
var state = $("#school").val();
$.ajax({
type:"post", 
url:"dropdown2.php", 
data:"school="+school, 
success: function(data) {
$("#classname").html(data);
}
});
});

});

</script>


</head>
<body>

<h1>Get Notes:</h1>
<br/>
<form action="dropdown2.php" method="post">

State: <select id="state" name="state">
<option>--Select State--</option>
<?php   
$sql = "SELECT states FROM states";
$result = mysql_query($sql);

while ($output = mysql_fetch_array($result)) {
$state_name = $output['states'];
echo "<option value=\"$state_name\">$state_name</option>";
}       
?>
</select>
<br/>

School: <select id="school" name="school">
<option>--Select School--</option>
</select>
<br/>

Class Name: <select id="classname" name="classname">
<option>--Select Class Name--</option>
</select>
<br/>

Class Number: <select id="classnumber" name="classnumber">
<option>Select Class Name</option>
</select>
<br/>

<input type="submit" value="Search" />
</form> 


</body>
</html>

Dropdown.php:

<?php
include_once("connect.php");

$state=$_POST["state"];
$result = mysql_query("select schools FROM schools where states='$state' ");
while($school = mysql_fetch_array($result)){
echo"<option value=".$school['schools'].">".$school['schools']."</option>";
}
?>

Dropdown2.php

<?php
include_once("connect.php");

$school=$_POST['school'];
$result = mysql_query("SELECT school_id FROM schools WHERE schools='$school' ");
$school_id = mysql_fetch_array($result);

$id = $school_id['school_id'];
$classname = mysql_query("SELECT DISTINCT class_abrv FROM classes WHERE school_id='$id'           ORDER BY class_abrv asc");

while($class = mysql_fetch_array($classname)){
echo"<option value=".$class['class_abrv'].">".$class['class_abrv']."</option>";
} 
?>

Answer 1

in second ajax function you have assigned the school drop down box value to state variable but you pass the variable school to ajax post. So there is no school variable that is why you get error.

$("#school").change(function(){
 var *state* = $("#school").val();
 //above variable should be school.
 $.ajax({
  type:"post", 
  url:"dropdown2.php", 
  data:"school="+*school*, 
  success: function(data) {
   $("#classname").html(data);
  }
 });
});

Dynamic Dependant Dropdown menu with ajax php mysql

Question

1 answers

solution1
0 ACCPTED 2013-07-22 01:35:00

Dynamic Dependant Dropdown menu with ajax php mysql

Question

1 answers

solution1 0 ACCPTED 2013-07-22 01:35:00

solution1
0 ACCPTED 2013-07-22 01:35:00