Haveing one drop down selection box populate another from Mysql database

Vote count:

0

I realise this is a popular topic and I have read though several examples but for some reason I cant get my AJAX code to load the second php page that will trigger the creation of the second drop down menu. I am using a test page called (page2.php) to try and debug this without the rest of my website getting in the way.

The page code is shown below.

<?php   include("db_connect.php"); 

$query = 'SELECT * FROM db_class_catagories';
$result = mysqli_query($dbconnection,$query);
?>

<select id="primary_catagory" name="primary_catagory" onchange = "getData(this)"style="position:absolute;left:10px;top:10px;width:315px;height:20px;z-index:11;text-align:left;">
<option value=''>Select</option>
<?php while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){
echo "<option value='" . $row['primary_catagory'] . "'>" . $row['primary_catagory'] . "  
</option>";}
?>
</select>

<div id="get_catagory"></div>

<script>
function getData(dropdown) {
    var catagory = dropdown.options[dropdown.selectedIndex].value;
    var dataString = "primary_catagory="+catagory;

$.ajax({
    type: "POST",
    url: "get_sub_catagory.php", // Name of the php files
    data: dataString,
    success: function(html)
    {
        $("#get_catagory").html(html);
    }
});
}
</script>

by use of alert I have determined that the drop down selection is at least reaching the function, but my AJAX code wont forward it on to the php page correctly.

the php page to generate the second drop down list is called get_sub_catagories.php and contains the following.

<?php
include("db_connect.php");
if ($_POST) {
    $primary_catagory = $_POST['primary_catagory'];
    if ($primary_catagory != '') {
       $query = "SELECT * FROM db_class_catagories WHERE primary_catagory=" . $primary_catagory;
       $result1 = mysqli_query($dbconnection,$query);

       echo "<select name='state'>";
       echo "<option value=''>Select</option>"; 
       while ($row = mysql_fetch_array($result1)) {
          echo "<option value='" . $row['sub_catagory'] . "'>" . $row['sub_catagory'] . "    
</option>";}
       echo "</select>";
    }
    else
    {
        echo  '';
    }
}
?>

The function is being called but no data is being passed to the get_sub_catagories.php page. Im sure ive just got a location messed up somewhere but im not solid on AJAX and using this as my tutorial.

I think its this part

        success: function(html)
        {
            $("#get_catagory").html(html);

But im not sure what's wrong.

Thanks for any pointers here!

asked 36 secs ago

user3611960

17

Haveing one drop down selection box populate another from Mysql database