Cascading dropdown list sends ajax request but doesn't return required html and data PHP

Question

I've been working on cascading drop downs( using php / Ajax ) where the second drop-down values are dependent on the first one, I've done what is supposed to be necessary but it doesn't seem to work, i will post my code below, and would appreciate a good eye or some helpful tips:

This is my first drop-down with correct locations got from database :

    <?php 
$sql1 = "SELECT location_Id,location_Name FROM locations  "; 
$result1 = $conn->query($sql1); ?>  
             <?php while ($row1= mysqli_fetch_array($result1)) { ?>                    
            <option value="<?php echo $row1['location_Id'] ; ?>"> <?php echo $row1['location_Name'] ; ?> </option>             
     <?php } ?> </select>

And my second drop-down that needs to be populated depending on first :

My script :

    <script type="text/javascript">
function get_states() { // Call to ajax function
    var location_Id = $('#location').val();
    var dataString = "location_Id="+location_Id;
    $.ajax({
        type: "POST",
        url: "http://192.168.0.10/skylite/gethosp", // Name of the php files
        data: dataString,
        success: function(html)
        {
            $("#hospital").html(html);
        }
    });
}
</script>

And my other php page/code that is being called from Ajax's request :

 <?php

$conn = new mysqli($servername, $username, $password, $dbname);
    if(isset($_POST['location_Id'])) {
      $sql = "select * from hospitals where location_Id=".mysqli_real_escape_string($conn, $_POST['location_Id']);
      $res = mysqli_query($conn, $sql);
      if(mysqli_num_rows($res) > 0) {
        echo "<option value=''>------- Select --------</option>";
       while($row = mysqli_fetch_object($res)) {
          echo "<option value='".$row['hospital_Id']."'>".$row['hospital_Name']."</option>";
        }
      }
    } else {
      header('http://192.168.0.10/skylite/Claims');
    }  
?>

The problem is when i choose a location from the first dropdown, the ajax request is being sent ( onclick="get_states();" ) with correct variable and id, but second dropdown is still not being populated

Answer 1

You have do it on onchange event not on click.

onclick="get_states()";

replace

onchange="get_states()";

Hope this will help you out.

Answer 2

From the error you mentioned in your comment, the error is in your PHP file. So the result that you get as html is the PHP error page or the beginning or your output with a error message, if you have a full page as an answer, that's why.

The reason is because you are using mysqli_fetch_object which gets each row as a PHP object, not an array.

You are then supposed to acces the properties like this

echo "<option value='".$row->hospital_Id."'>".$row->hospital_Name."</option>";