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

have a look on this jsfiddle.net/ex36m0uf/1 this is hint for you — Zeeshan
– Zeeshan, Commented Oct 27, 2015 at 10:24
thanks for your help guys, I am going to use the answer below — Tomas Lucena
– Tomas Lucena, Commented Oct 27, 2015 at 10:43

Alexander Solonik · Accepted Answer · 2017-07-27 18:12:04Z

2

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.

edited Jul 27, 2017 at 18:12

Alexander Solonik

10.4k20 gold badges88 silver badges189 bronze badges

answered Oct 27, 2015 at 10:24

Antonio Garcia Marin

4964 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John C · Accepted Answer · 2015-10-27 10:44:33Z

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>

Collectives™ on Stack Overflow

Get input checkbox values in php after ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related