Cant seem to get the first dependency to run on AJAX call

I am having significant issues trying to get the AJAX to fire on this PHP code.

I can get the first field populated without issue, however the AJAX call does not seem to populate the first dependency (and therefore the second). I am an AJAX newbie (and have googled extensively) but cannot seem to crack this one.

Note that the ladb.php file runs fine.

<?php 
    // Include the database config file 
    include_once 'ladb.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
    <body style="background: #D5DDE0">
        <div class="container">
            <form action="" method="post">
                <div class="form-group col-md-6">
                    <!-- Country dropdown -->

                    <label for="country">Country</label>
                    <select class="form-control" id="country">
                        <option value="">Select Country</option>
                        <?php 
                            $query = "SELECT * FROM City_Index GROUP BY country ORDER BY country ASC";
                            $result = $ladb->query($query);
                            if ($result->num_rows > 0) {
                                while ($row = $result->fetch_assoc()) {
                                    echo "<option value='{$row["countryid"]}'>{$row['country']}</option>";
                                }
                            }else{
                                echo "<option value=''>Country not available</option>"; 
                            }
                        ?>
                    </select><br>

                    <!-- State dropdown -->
                    <label for="admin">Administrative Area</label>
                    <select class="form-control" id="admin">
                        <option value="">Select Administrative Area</option>
                    </select><br>

                     <!-- City dropdown -->
                    <label for="city">city_ascii</label>
                    <select class="form-control" id="city">
                        <option value="">Select City</option>
                    </select>

                </div>
            </form>
        </div>
    </body>
</html>

<script type="text/javascript">
    $(document).ready(function(){
        // Country dependent ajax
        $("#country").on("change",function(){
            var country = $(this).val();
            if (countryid) {
                $.ajax({
                    url :"action.php",
                    type:"POST",
                    cache:false,
                    data:{countryid:countryid},
                    success:function(data){
                        $("#admin").html(data);
                        $('#city').html('<option value="">Select Administrative Area</option>');
                    }
                });
            }else{
                $('#admin').html('<option value="">Select Country</option>');
                $('#city').html('<option value="">Select Administrative Area</option>');
            }
        });

        // state dependent ajax
        $("#admin").on("change", function(){
            var admin = $(this).val();
            if (admin) {
                $.ajax({
                    url :"action.php",
                    type:"POST",
                    cache:false,
                    data:{admin:admin},
                    success:function(data){
                        $("#city").html(data);
                    }
                });
            }else{
                $('#city').html('<option value="">Select Administrative Area</option>');
            } 
        });
    });
</script>

JavaScript
​x
 
<?php     // Include the database config file     include_once 'ladb.php';?><!DOCTYPE html><html lang="en"><head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script></head>    <body style="background: #D5DDE0">        <div class="container">            <form action="" method="post">                <div class="form-group col-md-6">                    <!-- Country dropdown -->​                    <label for="country">Country</label>                    <select class="form-control" id="country">                        <option value="">Select Country</option>                        <?php                             $query = "SELECT * FROM City_Index GROUP BY country ORDER BY country ASC";                            $result = $ladb->query($query);                            if ($result->num_rows > 0) {                                while ($row = $result->fetch_assoc()) {                                    echo "<option value='{$row["countryid"]}'>{$row['country']}</option>";                                }                            }else{                                echo "<option value=''>Country not available</option>";                             }                        ?>                    </select><br>​                    <!-- State dropdown -->                    <label for="admin">Administrative Area</label>                    <select class="form-control" id="admin">                        <option value="">Select Administrative Area</option>                    </select><br>​                     <!-- City dropdown -->                    <label for="city">city_ascii</label>                    <select class="form-control" id="city">                        <option value="">Select City</option>                    </select>​                </div>            </form>        </div>    </body></html>​<script type="text/javascript">    $(document).ready(function(){        // Country dependent ajax        $("#country").on("change",function(){            var country = $(this).val();            if (countryid) {                $.ajax({                    url :"action.php",                    type:"POST",                    cache:false,                    data:{countryid:countryid},                    success:function(data){                        $("#admin").html(data);                        $('#city').html('<option value="">Select Administrative Area</option>');                    }                });            }else{                $('#admin').html('<option value="">Select Country</option>');                $('#city').html('<option value="">Select Administrative Area</option>');            }        });​        // state dependent ajax        $("#admin").on("change", function(){            var admin = $(this).val();            if (admin) {                $.ajax({                    url :"action.php",                    type:"POST",                    cache:false,                    data:{admin:admin},                    success:function(data){                        $("#city").html(data);                    }                });            }else{                $('#city').html('<option value="">Select Administrative Area</option>');            }         });    });</script>​

The action.php file below

<?php 
    // Include the database config file 
    include_once 'ladb.php';

    // Get country id through state name

    $country = $_POST['country'];

    if (!empty($country)) {
        // Fetch state name base on country id
        $query = "SELECT * FROM CityList WHERE country = {$country} GROUP BY admin_name_ascii";

        $result = $ladb->query($query);

        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
                echo '<option value="'.$row['admin_id'].'">'.$row['admin_name_ascii'].'</option>'; 
            }
        }else{
            echo '<option value="">State not available</option>'; 
        }
    }elseif (!empty($_POST['admin'])) {
        $admin = $_POST['admin']; 
        // Fetch city name base on state id

        $query = "SELECT * FROM CityList WHERE admin_id = {$admin}";

        $result = $ladb->query($query);

        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
                 echo '<option value="'.$row['cityid'].'">'.$row['city_ascii'].'</option>'; 
            }
        }else{
            echo '<option value="">City not available</option>'; 
        }
    }

?>

JavaScript
 
<?php     // Include the database config file     include_once 'ladb.php';​    // Get country id through state name​    $country = $_POST['country'];​    if (!empty($country)) {        // Fetch state name base on country id        $query = "SELECT * FROM CityList WHERE country = {$country} GROUP BY admin_name_ascii";​        $result = $ladb->query($query);​        if ($result->num_rows > 0) {            while ($row = $result->fetch_assoc()) {                echo '<option value="'.$row['admin_id'].'">'.$row['admin_name_ascii'].'</option>';             }        }else{            echo '<option value="">State not available</option>';         }    }elseif (!empty($_POST['admin'])) {        $admin = $_POST['admin'];         // Fetch city name base on state id​        $query = "SELECT * FROM CityList WHERE admin_id = {$admin}";​        $result = $ladb->query($query);​        if ($result->num_rows > 0) {            while ($row = $result->fetch_assoc()) {                 echo '<option value="'.$row['cityid'].'">'.$row['city_ascii'].'</option>';             }        }else{            echo '<option value="">City not available</option>';         }    }​?>​

Any help greatly appreciated!

Answer

Thanks to @zergski I note that one of references were defined (countryid in Line 53). DevTools is my new best friend.

Advertisement

Answer