Empty query result

Question

in a web form there are two drop-down lists. The second list items should change dynamically depending on the value selected on the first drop-down list.

This is how am I trying to do it:

index.php:

...

<script>
function getClient(val) {

    $.ajax({
    type: "POST",
    url: "get_contacts.php",
    data:'client_id='+val,
    success: function(data){
        $("#contacts-list").html(data);
    }
    });
}
</script>

...

 <div class="form-group">
        <label for="mto_client" class="col-sm-2 control-label">MTO Client</label>
        <div class="col-sm-10">
  <select name="mto_client" id="clients_list" onChange="getClient(this.value)">
  <option value="">Select a Client</option>
            <?php 
do {  
?>
            <option value="<?php echo $row_RSClients['id_client']?>" ><?php echo $row_RSClients['client_name']?></option>
            <?php
} while ($row_RSClients = mysql_fetch_assoc($RSClients));
?>
          </select>
      </div>
      </div>

       <div class="form-group">
        <label for="mto_client_contact" class="col-sm-2 control-label">MTO Client Contact</label>
        <div class="col-sm-10">

                  <select name="state" id="contacts-list">
            <option value="">Select Client Contact</option>
            </select>


      </div>
      </div>

get_contacts.php

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();

if(!empty($_POST["client_id"])) {
    $query ="SELECT * FROM tb_client_contacts WHERE contact_client_id = '" . $_POST["client_id"] . "'";
    $results = $db_handle->runQuery($query);
?>
    <option value="">Select Client Contact</option>
<?php
    foreach($results as $state) {
?>
    <option value="<?php echo $state["id_client_contact"]; ?>"><?php echo $state["contact_name"]; ?></option>
<?php
    }
}
?>

There are objects on the table tb_clients_contact that meet the condition, but the second drop-down list doesn't show any objects.

Any help is welcome.

Answer 1

Instead of

$("#contacts-list").html(data);

It should be

$('#contacts-list').empty().append(data);

empty() will clear first the options inside the contacts-list select field, then append() will insert the options from the result of your AJAX.

You can also look at the console log for errors. If you are using Google Chrome, hit F12 to display the console log.