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>
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>'; } } ?>
Any help greatly appreciated!
Advertisement
Answer
Thanks to @zergski I note that one of references were defined (countryid in Line 53). DevTools is my new best friend.