Question

46

Can I pass multiple checkbox values with one name?

rated 0 times [ 50] [ 4] / answers: 1 / hits: 22308 / 12 Years ago, sat, may 12, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

anabellejaynav

Add To Favorites

Follow

Total Points: 176

Total Questions: 105

Total Answers: 105

Location: Croatia

Member since Fri, Sep 11, 2020

4 Years ago

anabellejaynav questions

1 Accessing value of progressEvent for progress bar from axios to set state in React

Wed, May 13, 20, 00:00, 4 Years ago

1 useReducer returning a promise instead of the updated state

Thu, Apr 16, 20, 00:00, 4 Years ago

1 Content Security Policy multiple nonce

Tue, Jan 14, 20, 00:00, 4 Years ago

1 Change background color in vue.js based on a class name

Mon, Jan 13, 20, 00:00, 4 Years ago

1 Mongoose.connect not throwing any error, when Mongodb is not running

Fri, Jan 3, 20, 00:00, 5 Years ago

View All

answered 12 Years ago grant · Accepted Answer

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.