php: multiple select box in a array with search function

Question

I have arrays of select box which will output multiple select box depending on how many select box i wanna show. The function when i select the option is that it search room details in my database using ajax. The search function works but only in the first select box not for the rest of my select boxes. this is mypage.php

<select name = "room[]" id = "search">
  <option value = "none">&larr;Room</option>
  <?php
    $find_room = DB::getInstance()->query("SELECT * FROM tbl_room WHERE room_status =  'ENABLED'");
if($find_room->count()){
   foreach($find_room->results() as $find_room){

    ?>
     <option value = "<?php echo $find_room->room_id; ?>"><?php echo $find_room->room_number; ?>
     </option>
 <?php

    }
  } 
  ?>
</select>

this is my ajax

<script>    
    $(document).ready(function(){

    $("#search").change(function(){
        var search = $("#search").val();
        $.ajax({
            type:"POST",
            url:"programhead_ajaxroom.php",
            data:{search:search},
            success:function(res){
                $("#subjects").html(res);
            }

        });
    });
 });
</script>

this is my ajaxpage

if(isset($_POST['search'])){
 functions right here are select querys into table(this is working)
}

I really appreciate your help.

Sampath Liyanage · Answer 1 · 2014-12-12T18:28:59.970

0

Try using syntax for delegated event as you are dynamically changing HTML. Use the class attribute to define the change event and use this inside the function as you have many select boxes.

$(document).on("change",".search",function(){
    ele = $(this);
    var search = ele.val();
    $.ajax({
        type:"POST",
        url:"programhead_ajaxroom.php",
        data:{search:search},
        success:function(res){
            ele.html(res);
        }

    });
});

Also you have to use a class attribute in select html as IDs are supposed to be unique.

<select name = "room[]" id = "search" class="search">

edited Dec 12 '14 at 18:28

answered Dec 12 '14 at 17:32

Sampath Liyanage

4,776
2
28
40

the rest of the select box are now responding but it is returning the value of the first select box. – Sti Edu Dec 12 '14 at 18:19
@StiEdu , Do all the select boxes have the same id "serch"? – Sampath Liyanage Dec 12 '14 at 18:22
yes sir. as it is in array with a name of "room[]" and a id of "search". lets say i wanna output multiple select box depending on how much i wanna show. example im showing 3 select box only, the name behind memory allocation will be room[0], room[1], room[2]. is there anyway that i can get the value of select box not by id but by its name? – Sti Edu Dec 12 '14 at 18:38
Yes you can. Check this question : http://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery . Also ids are supposed to be unique. you can use something like room[x] for the values of ids also... – Sampath Liyanage Dec 12 '14 at 19:43

score 0 · Answer 2 · answered Dec 13 '14 at 15:53

oh well, what i missed is looping through every array of element

 $(document).on("change","select[name^=search]",function(){
        check_obj = document.getElementsByName("search[]");
        for (i=0; i<check_obj.length; i++)
        {
            if (check_obj[i].value == "none")
            {}
            else{
                var search= check_obj[i].value;
            }
        }
        $.ajax({
            type:"POST",
            url:"programhead_ajaxroom.php",
            data:{search:search},
            success:function(res){
                $("#subjects").html(res);
            }

            });

    });

php: multiple select box in a array with search function

2 Answers2