如何将多个具有相同类名的id值作为数组发送到Codeigniter中的数据库？

Question

Hi guys i am trying to send multiple id with same classname but different id values to the database using ajax but it only picks the first values not all the values how can i send these multiple values.

here is my code view

<li><div class="hour_slots_available" id="01_02"><span class="hour_tag">01:00 - 02:00</span></div></li>
<li><div class="hour_slots_available" id="02_03"><span class="hour_tag">02:00 - 03:00</span></div></li>
<li><div class="hour_slots_available" id="03_04"><span class="hour_tag">03:00 - 04:00</span></div></li>
<li><div class="hour_slots_available" id="04_05"><span class="hour_tag">04:00 - 05:00</span></div></li>
<li><div class="hour_slots_available" id="05_06"><span class="hour_tag">05:00 - 06:00</span></div></li>
<li><div class="hour_slots_available" id="06_07"><span class="hour_tag">06:00 - 07:00</span></div></li>
<li><div class="hour_slots_available" id="07_08"><span class="hour_tag">07:00 - 08:00</span></div></li>
<li><div class="hour_slots_available" id="08_09"><span class="hour_tag">08:00 - 09:00</span></div></li>
<li><div class="hour_slots_available" id="09_10"><span class="hour_tag">09:00 - 10:00</span></div></li>

now on click 
<button class="btn btn-success" onclick="gethourprice();">Get Prices</button>

when this function calls i want the div with class hour slots available to got to the database as array if they are selected .

here

<script type="text/javascript">    
function gethourprice()
{    
var selected_ids = document.getElementsByClassName('hour_slots_available ').id;
alert(selected_ids);    
}
</script>

but when the alert calls the selected_ids only show a single id 12_01 what seems to be the problem here? can you tell me ?

Answer 1

Try this: once you get all object with matching class, iterate the object and collect all ids, see below code

function gethourprice()
{    
var selectedIds="";
var selectedObject = document.getElementsByClassName('hour_slots_available ');
for(var i=0;i<selectedObject.length;i++)
  selectedIds+=selectedObject[i].id+",";
alert(selectedIds);    
}

Answer 2

You need to use loop here

function gethourprice(){

    var selected_ids = document.getElementsByClassName('hour_slots_available ').id;
    for(var i = 0; i < selected_ids.length; i++) {
       alert(selected_ids[i]); // Will alert all ids in loop
   }
}

Answer 3

you can get all the value in array arrayDiv and now you can easily pass the array arrayDiv to ajax.

Code ...

 var arrayDiv = new Array();; $('#getv').click(function(){ $('.hour_slots_available').each(function(i){ arrayDiv.push($(this).attr('id')); }); console.log(arrayDiv); // you can call Your ajax here }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li><div class="hour_slots_available" id="01_02"><span class="hour_tag">01:00 - 02:00</span></div></li> <li><div class="hour_slots_available" id="02_03"><span class="hour_tag">02:00 - 03:00</span></div></li> <li><div class="hour_slots_available" id="03_04"><span class="hour_tag">03:00 - 04:00</span></div></li> <li><div class="hour_slots_available" id="04_05"><span class="hour_tag">04:00 - 05:00</span></div></li> <li><div class="hour_slots_available" id="05_06"><span class="hour_tag">05:00 - 06:00</span></div></li> <li><div class="hour_slots_available" id="06_07"><span class="hour_tag">06:00 - 07:00</span></div></li> <li><div class="hour_slots_available" id="07_08"><span class="hour_tag">07:00 - 08:00</span></div></li> <li><div class="hour_slots_available" id="08_09"><span class="hour_tag">08:00 - 09:00</span></div></li> <li><div class="hour_slots_available" id="09_10"><span class="hour_tag">09:00 - 10:00</span></div></li> now on click <button id="getv" class="btn btn-success" >Get Prices</button> 

Answer 4

You should use something like this

function GetAllIds(){
    var idsArray = [];
    $(".hour_slots_available").each(function(){
        idsArray.push($(this).attr("id"));
        //or may be a comma seperated list
       //use jquery. write less do more :)
    });
    return idsArray;
}

Answer 5

but when the alert calls the selected_ids only show a single id 12_01 what seems to be the problem here? can you tell me ?

Because document.getElementsByClassName returns an array of multiple strings, not a single string.

Keep in mind that the code you shared returns undefined, as you are asking for the id value of an array. So you need to remove the .id part in document.getElementsByClassName('hour_slots_available ').id , and loop over selected_ids to manipulate the individual strings.

Example:

function gethourprice() {
  var selected_ids = document.getElementsByClassName('hour_slots_available ');
  for (id in selected_ids) {
    alert(id);
  };
};
gethourprice();

CodePen demo (using console.log instead of alert):

http://codepen.io/robee/pen/GWZxor

Answer 6

getElementsByClassName function will to return array of elements. but it was not javascript native function. get attribute from getElementsByClassName function will be depended by your browser. you need edit your gethourprice to get id form array of elements. here is example

<script type="text/javascript">

    function gethourprice(){

        var selected_ids = document.getElementsByClassName('hour_slots_available');
        var ids = [];
        for (var i = 0;  i < selected_ids.length; i++) {
            ids.push(selected_ids[i].id)
        }
        alert(ids);
    }
</script>