POST Array from checkbox via Jquery AJAX

Question

I want to send array from checkbox via Jquery AJAX, but the response is not right.

here the html :

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

Script

$(document).ready(function () {   
$('#form_krs_kolektif').submit(function (event) {

     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[]': $('#krs_id_kelas:checked').serialize() // only this part has a problem
        };
     $.ajax({
            type: 'POST',
            url: '<?=base_url()?>akademik/proses_krs_kolektif/',
            data: formData,
            dataType: 'json',
            encode: true
        })

    event.preventDefault();
    });

}); 

When I print_r the POST result from php part, the response from console is like this

Array
(
    [0] => krs_id_kelas%5B%5D=0ec81bdf-1fc6-447d-ab65-bc67a857d99c&krs_id_kelas%5B%5D=173867c3-5721-4aa2-9344-f5ad9fd05537
)

What I want is array like this, how can I fix it ?

Array
(
    [0] => 0ec81bdf-1fc6-447d-ab65-bc67a857d99c
    [1] => 173867c3-5721-4aa2-9344-f5ad9fd05537
)

Answer 1

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.

Answer 2

try this One
change from

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[]': $('#krs_id_kelas:checked').serialize() // only this part has a problem
};

to

var formData = $('#form_krs_kolektif').serialize();