How to Send the Values of an Array of Checkboxes Through Ajax Using Jquery

How to send the values of an array of checkboxes through Ajax using jQuery?

This worked fine for me

<input type="checkbox" class="ids" name="ids[]" value="2">
<input type="checkbox" class="ids" name="ids[]" value="3">
<input type="checkbox" class="ids" name="ids[]" value="4">
<input type="checkbox" class="ids" name="ids[]" value="5">
<input type="checkbox" class="ids" name="ids[]" value="6">

<div id="response"></div>
<button id="submit">Submit</button>

<script>

$('#submit').click(function() {

$.ajax({
    url: "stub.php",
    type: "post",
    data: $('.ids:checked').serialize(),
    success: function(data) {
    $('#response').html(data);
    }
});

});
</script>

Then on stub.php

var_dump($_POST);

POST Array from checkbox via Jquery AJAX

HTML should be, instead of ID you must use class:

 <input type="checkbox" class="krs_id_kelas" name="krs_id_kelas[]" value="0ec81bdf-1fc6-447d-ab65-bc67a857d99c">
 <input type="checkbox" class="krs_id_kelas" name="krs_id_kelas[]" value="173867c3-5721-4aa2-9344-f5ad9fd05537">

try this script:

$(document).ready(function () {   
 $('#form_krs_kolektif').submit(function (event) {
 var chekedValue = [];
 $('.krs_id_kelas:checked').each(function(){
   chekedValue .push($(this).val());
 })
 var formData = {
        'krs_id_prodi': $('#krs_id_prodi').val(), //this part is fine
        'periode': $('#periode_krs option:selected').val(), //this part is fine
        'krs_id_regis_mhs': $('#krs_id_regis_mhs').val(), //this part is fine
        'id_kelas': chekedValue // only this part has a problem
    };
 $.ajax({
        type: 'POST',
        url: '<?=base_url()?>akademik/proses_krs_kolektif/',
        data: formData,
        dataType: 'json',
        encode: true
    })

event.preventDefault();
});

}); 

and print $_POST you will get the desired result.

Pass checkbox values into an array using ajax to jsp

use .each , this demo check property checked

$('#submit').click(function() {    var arrayValue = [];   // use name or class name   $('input[name=invid]').each(function(){     if($(this).prop('checked')){       arrayValue.push($(this).val())     }   });
  console.log(arrayValue);  // arrayValue use in $.ajax });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="checkbox" name="invid" value="100236"><input type="checkbox" name="invid" value="100852"><input type="checkbox" name="invid" value="100962"><input type="checkbox" name="invid" value="100965"><input type="checkbox" name="invid" value="101002">
<button id="submit">Submit</button>

Pass Checkbox Array into AJAX call

Try to use the following at "data":

$.ajax({
    url: "https://www.example.com/search.php",
    method: "POST",
    data:{
        eventname: eventname,
        types: JSON.stringify(types)
    },
    dataType:"text",
    success:function(data)
    {
        $('#eventsList').html(data);
        $('#eventsList').slick($opts);
    }
});

With this, the types is a string and you need to parse it to array object on PHP side.

On server side, you can use the following code to get the array. The $item[0]

$event_types = $_POST['types'];
$item = (json_decode(stripslashes($event_types)));

How can I send the multiple checkbox value in Ajax and show in different div?

i think that the value of fruits input is not well received try to change your snippet code that get the checkbox values to this one

var checkboxValues = [];
$('input.removeLater:checked').map(function() {
            checkboxValues.push($(this).val());
});

now when you do a console.log(checkboxValues) it will appears the data that was checked.

$("input.test").click(function(){  getCheckboxVal();});
function getCheckboxVal(){var checkboxValues = [];$('input.removeLater:checked').map(function() {            checkboxValues.push($(this).val());});console.log(checkboxValues);  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input name="selector[]" id="ad_Checkbox1" class="removeLater" type="checkbox" value="Apple" />Apple                    <input name="selector[]" id="ad_Checkbox2" class="removeLater" type="checkbox" value="Lichi" />Lichi                    <input name="selector[]" id="ad_Checkbox3" class="removeLater" type="checkbox" value="Mango" />Mango                    <input name="selector[]" id="ad_Checkbox4" class="removeLater" type="checkbox" value="Banana" />Banana
<input type="button" value="Ajax Submit" class="test" >

Pass checkbox values into an array using ajax to php

You have to use [] for name attribute and not for id, otherwise it can't act like an array

<input type="checkbox" id="Educator_Classes" name="Educator_Classes[]" class="Educator_Classes" value="<?php echo $Class_Number; ?>"/>

And also your jQuery code can be simpler:

$("#Send_Invite").click(function() {
    var form_data = $(this).closest('form).serialize();
    form_data['ajax'] = 1;

    $.ajax({
        url: "<?php echo site_url('schedule/update_educator_class'); ?>",
        type: 'POST',
        data: form_data,
        success: function(data) {
            $('#response').html(data);
        }
    });

    return false;
});

To debut what's passed to $Educator_Classes you can do this:

var_export($Educator_Classes);

---

Related Topics