How to pass multiple checkboxes using jQuery ajax post

Question

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   lt form gt   lt input type  checkbox  name  user ids    value  1 id  checkbox 1    gt   lt input type  checkbox  name  user ids    value  2 id  checkbox 2    gt   lt input type  checkbox  name  user ids    value  3 id  checkbox 3    gt   lt input name  confirm  type  button  value  confirm  onclick  submit form       gt   lt  form gt

User · Answer

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)

User · Answer

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

User · Answer

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

User · Answer

This would be better and easy  var arr      input name  user ids       map function      return   this  val       get     console log arr

User · Answer

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    lt input style  display none   type  checkbox  name  user ids    value  none  checked  checked  gt  lt  input gt    This way if no boxes are checked  it will still set the array with a value of  none

User · Answer

If you re not set on rolling your own solution  check out this jQuery plugin   malsup com jquery form   It will do that and more for you  It s highly recommended

User · Answer

Here s a more flexible way   let s say this is your form    lt form gt   lt input type  checkbox  name  user ids    value  1 id  checkbox 1    gt   lt input type  checkbox  name  user ids    value  2 id  checkbox 2    gt   lt input type  checkbox  name  user ids    value  3 id  checkbox 3    gt   lt input name  confirm  type  button  value  confirm  onclick  submit form       gt   lt  form gt    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    lt  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

[javascript] How to pass multiple checkboxes using jQuery ajax post

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to ajax