CODEWITHSUNDEEP
javascriptjqueryhtmlajax
ahmed
ahmed

Reputation: 14666

How to pass multiple checkboxes using jQuery ajax post

How to pass multiple checkboxes using jQuery ajax post

this is the ajax function

 function submit_form(){
 $.post("ajax.php", {
 selectedcheckboxes:user_ids,
 confirm:"true"
 },
 function(data){
  $("#lightbox").html(data);
  });
 }

and this is my form

<form>
<input type='checkbox' name='user_ids[]' value='1'id='checkbox_1' />
<input type='checkbox' name='user_ids[]' value='2'id='checkbox_2' />
<input type='checkbox' name='user_ids[]' value='3'id='checkbox_3' />
<input name="confirm" type="button" value="confirm" onclick="submit_form();" />
</form>

Upvotes: 28

Views: 115843

Answers (7)

Vidhi Nagar
Vidhi Nagar

Reputation: 1

function hbsval(arg) {
  // $.each($("input[name='Hobbies']:checked"), function (cobj) {
  var hbs = new Array();
  $('input[name="Hobbies"]:checked').each(function () {
    debugger

    hbs.push($(this).val())
  });

  alert("No. of selected hbs: " + hbs.length + "\n" + "And, they are: " + hbs[0] + hbs[1]);
}

Upvotes: 0

Mike
Mike

Reputation: 257

The following from Paul Tarjan worked for me,

var data = { 'user_ids[]' : []};
$(":checked").each(function() {
  data['user_ids[]'].push($(this).val());
});
$.post("ajax.php", data);

but I had multiple forms on my page and it pulled checked boxes from all forms, so I made the following modification so it only pulled from one form,

var data = { 'user_ids[]' : []};
$('#name_of_your_form input[name="user_ids[]"]:checked').each(function() {
  data['user_ids[]'].push($(this).val());
});
$.post("ajax.php", data);

Just change name_of_your_form to the name of your form.

I'll also mention that if a user doesn't check any boxes then no array isset in PHP. I needed to know if a user unchecked all the boxes, so I added the following to the form,

<input style="display:none;" type="checkbox" name="user_ids[]" value="none" checked="checked"></input>

This way if no boxes are checked, it will still set the array with a value of "none".

Upvotes: 2

SagarPPanchal
SagarPPanchal

Reputation: 10131

This would be better and easy

var arr = $('input[name="user_ids[]"]').map(function(){
  return $(this).val();
}).get();

console.log(arr);

Upvotes: 2

Paul Tarjan
Paul Tarjan

Reputation: 50662

From the jquery docs for POST (3rd example):

$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

So I would just iterate over the checked boxes and build the array. Something like

var data = { 'user_ids[]' : []};
$(":checked").each(function() {
  data['user_ids[]'].push($(this).val());
});
$.post("ajax.php", data);

Upvotes: 50

Adrian Fernando Alconera
Adrian Fernando Alconera

Reputation: 149

Here's a more flexible way.

let's say this is your form.

<form>
<input type='checkbox' name='user_ids[]' value='1'id='checkbox_1' />
<input type='checkbox' name='user_ids[]' value='2'id='checkbox_2' />
<input type='checkbox' name='user_ids[]' value='3'id='checkbox_3' />
<input name="confirm" type="button" value="confirm" onclick="submit_form();" />
</form>

And this is your jquery ajax below...

                // Don't get confused at this portion right here
                // cuz "var data" will get all the values that the form
                // has submitted in the $_POST. It doesn't matter if you 
                // try to pass a text or password or select form element.
                // Remember that the "form" is not a name attribute
                // of the form, but the "form element" itself that submitted
                // the current post method
                var data = $("form").serialize(); 

                $.ajax({
                    url: "link/of/your/ajax.php", // link of your "whatever" php
                    type: "POST",
                    async: true,
                    cache: false,
                    data: data, // all data will be passed here
                    success: function(data){ 
                        alert(data) // The data that is echoed from the ajax.php
                    }
                });

And in your ajax.php, you try echoing or print_r your post to see what's happening inside it. This should look like this. Only checkboxes that you checked will be returned. If you didn't checked any, it will return an error.

<?php 
    print_r($_POST); // this will be echoed back to you upon success.
    echo "This one too, will be echoed back to you";

Hope that is clear enough.

Upvotes: 7

simnom
simnom

Reputation: 2620

Just came across this trying to find a solution for the same problem. Implementing Paul's solution I've made a few tweaks to make this function properly.

var data = { 'venue[]' : []};

$("input:checked").each(function() {
   data['venue[]'].push($(this).val());
});

In short the addition of input:checked as opposed to :checked limits the fields input into the array to just the checkboxes on the form. Paul is indeed correct with this needing to be enclosed as $(this)

Upvotes: 17

Phil Jackson
Phil Jackson

Reputation: 10288

Could use the following and then explode the post result explode(",", $_POST['data']); to give an array of results.

var data = new Array();
$("input[name='checkBoxesName']:checked").each(function(i) {
    data.push($(this).val());
});

Upvotes: 17

Related Questions