CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Paul
Paul

Reputation: 11756

Can I pass multiple checkbox values with one name?

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?

Upvotes: 7

Views: 23362

Answers (3)

ssokolow
ssokolow

Reputation: 15355

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:

  1. Make web advertising and "take a survey!" interstitials less annoying
  2. Reduce the sluggishness of having tons of tabs and extensions open
  3. 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.

Upvotes: 1

namuol
namuol

Reputation: 9996

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.

Upvotes: 14

Chase
Chase

Reputation: 29569

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.

Upvotes: 4

Related Questions