I am trying to create a dependent dynamic drop down box on three input fields. At the moment the each input field is getting their data from their individual tables called tour_type, countries and destination. This is the form:
<label>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>
<?php
$sql=mysql_query("SELECT * FROM `countries` where `tour_type_id` = ?"); //what should i put in here?
while($row=mysql_fetch_array($sql))
{
$cid=$row['countries_id'];
$name=$row['countries_name'];
echo "<option value='$cid'>".$name."</option>";
}
?>
</select>
<label>Destination </label>
<select id="destination" name="destination" class="destination" required>
<option value="" selected="selected">-- Select --</option>
<?php
$sql=mysql_query("SELECT * FROM `destination` where `countries_id` = ?");//what should i put in here?
while($row=mysql_fetch_array($sql))
{
$destination_id=$row['destination_id'];
$name=$row['destination_name'];
echo "<option value='$destination_id'>".$name."</option>";
}
?>
</select>
This is the javascript at the top of the form
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$(".destination").html(html);
}
});
});
});
</script>
Finally these are the 3 tables i.e. tour_type, countries and destination respectively:
Can anyone help me on this? How do I make each drop down box dependable on each other? For e.g. If i select Culture on the 1st drop down, then only Holland and Belgium should show in the 2nd drop down. So now if i select Holland from 2nd drop down, then Amsterdam should show in the 3rd drop down.
This is the ajax.php which i am not too sure if it is right.
<?php
include('../config.php');
if($_POST['']) //what should i put in here?
{
$id=$_POST['']; //what should i put in here?
$sql=mysql_query //this is where i do not know what to put;
while($row=mysql_fetch_array($sql))
{
//And what should i be placing here
}
}
?>
This is what the web front end form looks like after implementing the code provided by dianuj. I still can not select the 2nd and 3rd drop down boxes: