Can I pass multiple checkbox values with one name?

Question

I'm using Twitter's bootstrap and need to pass a delimited list of checkbox selections to my server for processing. The checkbox HTML looks like this:

<div class="controls">
    <label class="checkbox"><input type="checkbox" name="my_match[]" value="190">TEST 190</label>
    <label class="checkbox"><input type="checkbox" name="my_match[]" value="200">TEST 200</label>
    <label class="checkbox"><input type="checkbox" name="my_match[]" value="210">TEST 210</label>
</div>

...

$.post("form.php", $("#form_id").serialize(), function(){
    ...
});

I'm passing the form values as a serialized string using jquery but the values are being sent like so:

my_match=190&my_match=200

Is it possible to send them in the following format?

my_match=190:200

I'm not sure if I need to change my HTML or this is something I need to handle with javascript. Any thoughts?

namuol · Accepted Answer · 2012-05-12 01:51:31Z

14

Something like this would do the trick:

<div class='controls'>
    <label class="checkbox">
        <input type="checkbox" name="my_match[]" value="190">TEST 190</label>
    <label class="checkbox">
        <input type="checkbox" name="my_match[]" value="200">TEST 200</label>
    <label class="checkbox">
        <input type="checkbox" name="my_match[]" value="210">TEST 210</label>
</div>

<form>
    <input id='my_match' type='hidden' name='my_match[]' />
    <button>Submit</button>
</form>

$('form').submit(function() {
    var arr=[];

    $('input:checked[name=my_match[]]').each(function(){
        arr.push($(this).val());
    });

    $('#my_match').val(arr.join(':'));
    alert($('#my_match').val());

    // Prevent actual submit for demo purposes:
    return false;
});

Try out the fiddle

Edit: This is basically exactly what Chase described in his answer.

answered May 12, 2012 at 1:51

namuol

10k6 gold badges44 silver badges54 bronze badges

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

1 Comment

Paul Over a year ago

The combination of this and the hidden field did the trick. Thanks!

Chase · Accepted Answer · 2012-05-12 01:32:35Z

4

I believe checkboxes with the same name return back with a comma separated list. What you could do is create a hidden field, append your checked checkbox values the way you want and then send the hidden field instead.

answered May 12, 2012 at 1:32

Chase

29.6k1 gold badge52 silver badges49 bronze badges

1 Comment

Ulvi Over a year ago

This didn't worked for me. I have checkboxes with the same name and different values.

ssokolow · Accepted Answer · 2016-01-16 01:09:07Z

For anyone else who gets brought here by Google:

To the best of my knowledge, JavaScript is the only way to make them a string with separators because it gets complicated if you want a general solution which can deal with all possible desired separators and support the escaping the separator if it shows up in one of the value strings.

If at all possible, I strongly recommend just accepting the my_match=190&my_match=200 format and converting them on the server.

In PHP, that's automatic if you put the [] at the end of the name. In other languages, such as Python, there will usually be a special getter which returns a list rather than a single value. (For example, request.POST.getlist('my_match') in Django)

Relying on JavaScript makes your page more fragile since a flaky connection, a network hiccup, or a broken application-layer firewall could prevent the JavaScript from loading or delay it long enough for the user to try clicking Submit without it.

(And, if you disable the submit button until the JavaScript has loaded, you'll just annoy and/or frustrate your visitors and give them the impression that your site is shoddily built because everyone else does just fine without that restriction. Always keep in mind how your actions affect the first impression you make.)

...not to mention, depending on JavaScript when you don't strictly need to (eg. dropdown menus without a :hover fallback, forms that frivolously require JavaScript to submit, etc.) annoys people like me who use JavaScript whitelisting tools like NoScript to:

Make web advertising and "take a survey!" interstitials less annoying
Reduce the sluggishness of having tons of tabs and extensions open
Limit the chances that a 0-day exploit will succeed

If you absolutely must use JavaScript in a situation like this, be sure to use a <noscript> tag to warn people to reload with JavaScript enabled before they fill out the form.

Collectives™ on Stack Overflow

Can I pass multiple checkbox values with one name?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related