jQuery AJAX with array

Question

Hi There,

I'm working on a project and try to send the value of my multiple selected "checkboxes". However, the result is always undefined. He can't find the boxes. They stay empty. I've tested another input on the same page, which in case, he found.

The problem here is that my input field stays undefined (For testing purposes I "checked" two Checkboxes)

pager.js

 var requestGroupDel = false;
$('.agg_trash').on("click", function() {
 if (requestGroupDel == false) {
 requestGroupDel = true;
 var check_list = $('input[name=check_list]').val();
 requestDel = false;
 $.ajax({
 type: "POST",
 url: "app/control/ajax.php?action=groupdelete",
 async: true,
 data: {
 "check_list": check_list
 },
 success: function(data) {
 data = $.trim(data);
 requestGroupDel = false;
 console.log(data);
 }
 });
 }
});

The Form (It's in a WHILE loop)

<input type="checkbox" class="agg_check" name="check_list[]" value="' . $artikel['id'] . '">

All Checkboxes have the same name, since I want the result as an array, so that I can run a foreach. Why is this input undefined?

Answer 1

You could use the checked attribute to get the values of those inputs. And then, loop through it with each() function to build your array.

i.e. :

var check_list = []
$("input[name='check_list[]']:checked").each(function() {
 check_list.push($(this).val());
});
console.log(check_list);

Output :

Array [ "2", "3", "4" ]

Answer 2

Change

var check_list = $('input[name=check_list]').val();

By

var check_list = $('input[name^="check_list"]:checked').toArray().map(function(el){
 return $(el).val();
});

• Synthiatic: Sadly, check_list will still be undefined.