Failed to process checkbox values with AJAX in PHP - php

Question

I have an HTML form with text, radio and checkbox inputs. When I submit it with AJAX, I only get the last checkbox value in array.
My HTML file:
<form class="ajaxonsubmit" action="process.php" method="post">
<label>Name</label><input type="text" name="name">
<label>Father's Name</label><input type="text" name="father_name">
<label>Gender</label>
<input type="radio" value="1" name="gender">Male <br>
<input type="radio" value="2" name="gender">Female <br>
<label>Options</label>
<select name="campus">
<option value="1">Option1 </option>
<option value="2">Option2 </option>
</select>
<label>Check List</label>
<input type="checkbox" name="check[]" value="1">
<input type="checkbox" name="check[]" value="2">
<input type="checkbox" name="check[]" value="3">
<button name="submit" type="submit">Submit</button>
My JS file.
$('.ajaxonsubmit').on('submit', function() {
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(data) {
$("#wrap").html(data);
}
});
return false;
});
I am using var_dump($_POST); function in process.php to check the array and I get ["check"]=> array(1) { [0]=> string(1) "3" }

Answer 1

You can serialize the form data , and access in PHP side
$('.ajaxonsubmit').on('submit', function(e) {
e.preventdefault();
$.ajax({
url: url,
type: type,
data: $(this).serialize(),
success: function(data) {
$("#wrap").html(data);
}
});
});
in PHP
print_r($_POST);

Answer 2

Add class="checkBoxClass" to your checkbox,
Then in your js, just add the following code to add the data into your chkArray
var chkArray = [];
$(".checkBoxClass:checked").each(function() {
chkArray.push($(this).val());
});
Finally append the array to the data you are posting
Cheers.