Dynamic drop down box - php

Question

I am trying to create 3 drop down boxes dependent on each other. Each drop down box is getting its data from its own tables. There are 3 tables as shown:
This is the form:
<label for="tourtype">
Tour Type
</label>
<select id="tourtype" name="tourtype" required>
<option value="" selected="selected">
--Select--
</option>
<?php
$sql=mysql_query("Select tour_type_id,tour_name from tour_type");
while($row=mysql_fetch_array($sql))
{
$tour_type_id=$row['tour_type_id'];
$name=$row['tour_name'];
echo "<option value='$tour_type_id'>$name</option>";
}
?>
</select>
<label>
Country
</label>
<select id="country" name="country" class="country" required>
<option value="" selected="selected">
-- Select --
</option>
</select>
<
<label>
Destination
</label>
<select id="destination" name="destination" class="destination" required>
<option value="" selected="selected">
-- Select --
</option>
</select>
This is the javascript:
<script type="text/javascript">
$('#tour_type').change(function () {
var id = $(this).val();
$.ajax({
type: "POST",
url: "ajax.php",
data: "&id=" + id + "&get_countries=1",
success: function (html) {
$("#country").html(html);
}
});
});
$('#country').change(function () {
var id = $(this).val();
$.ajax({
type: "POST",
url: "ajax.php",
data: "&id=" + id + "&get_destination=1",
success: function (html) {
$("#destination").html(html);
}
});
});
</script>
And this is the ajax.php
<?php
include ('../config.php');
< ? php
if ($_REQUEST['get_countries']) {
$sql = mysql_query("SELECT * FROM `countries` where `tour_type_id`=" . $_REQUEST['id']);
$countries = "";
while ($row = mysql_fetch_array($sql)) {
$cid = $row['countries_id'];
$name = $row['countries_name'];
$countries.= "<option value='" . $cid . "'>" . $name . "</option>";
}
echo $countries;
}
elseif ($_REQUEST['get_destination']) {
$destination = "";
$sql = mysql_query("SELECT * FROM `destination` where `country_id` =" . $_REQUEST['id'])
while ($row = mysql_fetch_array($sql)) {
$destination_id = $row['destination_id'];
$name = $row['destination_name'];
$destination.= "<option value='" . $destination_id . "'>" . $name . "</option>";
}
echo $destination;
}
?>
The problem is the 2nd and 3rd drop down boxes are not populating anything. Can anyone help me? For example if i select culture on the 1st drop down, the 2nd drop down should show Holland and Belgium. Then if i select Holland, the 3rd drop down should show Amsterdam.

Answer 1

Your identifier in your Javascript is #tour_type when your id is #tourtype.
If the syntax is correct and your SQL results are correct too, it should work.
EDIT: some of your JS isn't right.
data: "&id=" + id + "&get_countries=1",
should be
data: {id: id, get_countries: 1},
You should also put a debug on your ajax call by adding
error: function () { alert("ajax failed"); }
after your success callback
full sources now:
$('#tourtype').change(function() {
var id=$(this).val();
$.ajax
({
type: "POST",
url:"jurassicbase5/admin/ajax.php",
data: {id: id, get_countries: 1},
success: function(html){
$("#country").empty();
$("#country").append(html);
},
error: function () { alert("ajax failed"); }
});
});
$('#country').change(function() {
var id=$(this).val();
$.ajax
({
type: "POST",
url: "jurassicbase5/admin/ajax.php",
data: {id: id, get_destination: 1},
success: function(html)
{
$("#destination").empty();
$("#destination").append(html);
},
error: function () { alert("ajax failed"); }
});
});