how to get multiple data from a php and store it in select options using ajax

Question

I have a select option from which I can select a hotel name which I get from a php script.

And then I have another select option which shows room types based on the hotel selected from 1st select option.

And when I select a hotel with the help of ajax I only get one room type in my 2nd select option, while in my table I have multiple room types for a single hotel.

My php code for getting room types.

<?php 
      include('mysql.php'); 
      $h_id = $_POST['hotel_id'];
      $result = mysql_query("SELECT * FROM room_type WHERE hotel_id = '$h_id'"); 
      while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
            $type_name = $row['type_name'];
            $type_id = $row['roomtype_id'];
            echo $type_name.",".$type_id;
      }


      exit();   
?>

javascript:

 jQuery(document).ready(function($){ $('#hotel_list').change(function(){ $.ajax({ type:'post', url:'roomtype_fetch.php', data: 'hotel_id='+ $(this).val(), success: function(value){ var data = value.split(","); var type_name =data[0]; var type_id =data[1]; $("#roomtype_list").html("<option value="+type_id+">"+type_name+"</option>"); } }); }); }); 

html for 1st select option with its php to get hotel name.

<select class="form-control" name="hotel_list" id="hotel_list" onchange="cal()">
    <option>--Select--</option>
    <?php
         $query2 = mysql_query("SELECT * FROM hotel") or die("the query cannot be completed at this moment");
         if(mysql_num_rows($query2) <1) {
    ?>
    <option>No Hotel Found!</option>
    <?php
         }
         while($row = mysql_fetch_array($query2, MYSQL_ASSOC)){
              $hotel_name = $row['hotel_name'];
              $hotel_id_1 = $row['hotel_id'];
    ?>
    <option value="<?php echo $hotel_id_1; ?>"><?php echo $hotel_name; ?></option>
    <?php
        }
    ?>
</select>

2nd select html code:

<select class="form-control" name="roomtype_list" id="roomtype_list">
    <option>--Select--</option>                     
</select>

Any type of help would be appreciated.

Answer 1

You cant directly do value.split(",") because your php output looks like:

name1,id1name2,id2name3,id3

echo does not add a new line at the end, if you change the line to:

echo $type_name.",".$type_id,"\n";

That would give you an output like:

name1,id1
name2,id2
name3,id3

Which then you can split by "\\n" to get an array of lines then by "," to separate name and id:

var data = value.split(",");
data.forEach(function(line){
    var type_values = line.split(",");
    var type_name = type_values[0];
    var type_id = type_values[1];
    $("#roomtype_list").html("<option value="+type_id+">"+type_name+"</option>");
}

But anyway, I think your best option is to change your php to return JSON:

$result = array();
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
    $result[] = $row;
}
echo json_encode($result);

Then just do something like:

var data = JSON.parse(value);
$("#roomtype_list").empty();
data.forEach(function(type){
    $("#roomtype_list").append("<option value="+type.roomtype_id+">"+type.type_name+"</option>");
});

Answer 2

The first thing is, your php loop that generates the types gives a wrong output:

  while($row = mysql_fetch_array($result, MYSQL_ASSOC)){ $type_name = $row['type_name']; $type_id = $row['roomtype_id']; echo $type_name.",".$type_id; } 

That gives you something like that:

name1,type1name2,type2name3,type3...

You should add a ; or an other separator like that between, so change the echo line to:

echo $type_name.",".$type_id.",";

That will give you an output like that:

name1,type1;name2,type2;name3,type3...

The second thing is, that you have to loop with jquery through your received types. You split the received string in an array:

var data = value.split(",");

..and so you should do the following in your javascript success function:

...
success: function(value){
        var data = value.split(";");
        //split all types first with ";"
        $.each(data, function() {
            var type = $(this).split(",");
            //then split the type in name and id
            var type_name = type[0];
            var type_id = type[1];
            //add every type to roomtype_list
            $("#roomtype_list").html("<option value="+type_id+">"+type_name+"</option>");
        });
}
...

Explanation: Split first all types with the separator ";" and split then the type in name and id with "," . I hope this helps.