Dynamic drop down box

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"); }
    });
});