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?

Answer 1

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.