Get input checkbox values in php after ajax

Question

I have search a lot but couldn't apply any answer to my problem.

I have a form generated by php. The form result is like this:

<form class="add-item">
  <input type="checkbox" value="1" name="cust[]">
  <input type="checkbox" value="2" name="cust[]">
  <input type="checkbox" value="3" name="cust[]">
  <input type="checkbox" value="4" name="cust[]">
  <button class="submit"> 
</form>

This form can have 4 inputs or 20, depend the product.

So now I want to send the checked boxes to php through ajax. For this reason I have tried this:

$.ajaxSetup({
    url: "testing_cart.php",
    type: 'POST', 
    data: 'cust='+$('.add-item input[name="cust[]"]').serialize()+'', 
    success: function(data){
        alert(data); // to see what is going on in php
    },
    error: function(){
       alert('dio error');
       } 
 });
$.ajax();

In my PHP file I have only this:

$cust = $_POST['cust'];
print_r($cust);// to see what ajax send

In some way this code is working but not as I am expecting.

If I check the only one checkbok I get this result:

cust[]='1' // the value of the checked checkbox

and if I check more than 1 I get an array but this array ignores the first item on the list... for example the code below is if I check all the checkbox... as you can see the first input is ignored:

Array
(
    [0] => 2 // the value of the checked checkbox
    [1] => 3 // the value of the checked checkbox
    [2] => 4 // the value of the checked checkbox
)

I want to get an array always (if is possible) so if I the customer will select only 1 I get:

Array
(
    [0] => 2 // the value of the checked checkbox
)

And if the customer select more well, all the values in an array.

Any idea?

p.s. sorry if my code vocabulary is not the best

Answer 1

I think is more simple.

 $(document).ready(function () {
            $('.add-item').submit(function (event) {
                var data = $('.add-item').serialize(); // send all the form data
                console.log(data); // for debug only
                $.ajax({
                    type: 'post',
                    url: 'form_ajax.php',
                    data: data,
                }).done(function (data) {
                    console.log(data); // response from server via ajax
                });
                event.preventDefault(); // prevent submit
            });
        });

With this manner you send all the form. Nothing changes even if you send 1 or 20 values.

Answer 2

I suspect the problem is with your data statement. .serialize() returns a string containing the input field names followed by their value. Your data statement forms this string cust=cust[]=1&cust[]=2&cust[]=3&cust[]=4 (when all check boxes are selected). This (and I'm really just guessing here) first allocates the array cust[] to the variable cust (the =1 is dropped as it is invalid in a query string) then starts assigning values to that array. Which is why you are only getting the last three values.

To fix your problem you could change your data declaration to -

data: $('.add-item input[name="cust[]"]').serialize(),

and also change your php $cust declaration to -

$cust = $_POST['cust[]'];

If that is valid in php. (I have very little experience php).

The below demonstrates what your serialize statement is creating -

$("#serialise").click(function() {
  $("#result").text(unescape('cust=' + $('.add-item input[name="cust[]"]').serialize() + ''));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="add-item">
  <input type="checkbox" value="1" name="cust[]">
  <input type="checkbox" value="2" name="cust[]">
  <input type="checkbox" value="3" name="cust[]">
  <input type="checkbox" value="4" name="cust[]">
  <button id="serialise" class="submit">Serialise</button>
</form>
<div id=result "></div>