How to serialize multiple checkbox values by jQuery?

Question

I modified the simple example of jQuery.post as

  $("#searchForm").submit(function(event) {
    event.preventDefault(); 
    var $form = $( this ),
        term = $( "input[name^=tick]:checked" ).serialize(),
        url = $form.attr( 'action' );
    $.post( url, { ticks: term, id: '55' },
      function( data ) {
          $( "#result" ).empty().append( data );
      }
    );
  });

This works for single checkbox with val() but not for multiple checkboxes in

<input type="checkbox" name="tick" value="'.$value.'" />

since serialize() should generateticks: termto be used astermin$.post`.

How can I make the serialize() to generate appropriate data for $.post

NOTE: I do not want to serialize the entire form but only checked values of checkbox INPUT.

Ajsti.pl - Maciej Szewczyk · Accepted Answer · 2013-10-24 13:44:37Z

5

Simple value collector :) HTML

<input type="checkbox" class="selector" value="{value}"/>

JS

 var checked='';
            $('.selector:checked').each(function(){
                checked=checked+','+$(this).val();
            });

PHP

 $ids=explode(',',substr($_GET['param_with_checked_values'],1));

answered Oct 24, 2013 at 13:44

Ajsti.pl - Maciej Szewczyk

1931 silver badge9 bronze badges

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

Comments

Sudhir Bastakoti · Accepted Answer · 2011-11-28 12:04:01Z

4

You could use .serializeArray() Ref: http://api.jquery.com/serializeArray/

answered Nov 28, 2011 at 12:04

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

1 Comment

Punit Over a year ago

you can store the values in array and than serialise it.

Beppe · Accepted Answer · 2016-01-31 08:22:37Z

3

In html code change name="tick" in name="tick[]" and you can use simply $(this).serialize(); to post all checked values.

answered Jan 31, 2016 at 8:22

Beppe

313 bronze badges

1 Comment

MaggusK Over a year ago

Wow, this is quite the easiest way to get multible checkbox values!

Stanimir Stoyanov · Accepted Answer · 2017-05-18 17:10:00Z

You can still use .serializeArray and use it in .post() like this:

var postData = {};
var form = $('#formId').serializeArray();
for (var i = 0; i < form.length; i++) {
    if (form[i]['name'].endsWith('[]')) {
        var name = form[i]['name'];
        name = name.substring(0, name.length - 2);
        if (!(name in postData)) {
            postData[name] = [];
        }
        postData[name].push(form[i]['value']);
    } else {
        postData[form[i]['name']] = form[i]['value'];
    }
}

$.post('/endpoint', postData, function(response) {

}, 'json');

postData will contain all form elements except the disabled ones. All checkbox values will be passed as an array just like when doing a normal form submission.

mu4ddi3 · Accepted Answer · 2018-04-13 09:43:54Z

1

let $form = $(".js-my-form");
let $disabled = $form.find(':input:disabled').removeAttr('disabled');
let formData = {};
$.each($form.serializeArray(), function (index, fieldData) {
    if (fieldData.name.endsWith('[]')) {
        let name = fieldData.name.substring(0, fieldData.name.length - 2);
        if (!(name in formData)) {
            formData[name] = [];
        }
        formData[name].push(fieldData.value);
    } else {
        formData[fieldData.name] = fieldData.value;
    }
});
$disabled.attr('disabled', 'disabled');
console.log(formData);

Its a variation of Stanimir Stoyanov answer with possibility to serialize disabled fields.

answered Apr 13, 2018 at 9:43

mu4ddi3

13510 bronze badges

Comments

mozgras · Accepted Answer · 2015-03-06 20:15:37Z

0

term = $("#input[name^=tick]:checked").map(function () {
    return this.value;
}).get();
term.join();

answered Mar 6, 2015 at 20:15

mozgras

3,3253 gold badges23 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to serialize multiple checkbox values by jQuery?

6 Answers 6

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related