Question

This form has multiple choices through a checkbox. Eg. Pet You Own is a multiple choice and there are various options such as Cat, Dog, Mule etc.

Now by default, the querystring sent will look like:

?pet=dog&pet=cat&pet=mule 

given all 3 are checked.

I need a way to parse this so that the querystring looks like:

?pet=dog,cat,mule

Another requirement is that, there are other parameters/inputs in the form so it needs to work in conjunction with other standard form inputs.

Answer 1

The format you’re currently seeing is the conventional format. If your form fields were named pet[] rather than pet, your server would be able to interpret the result as an array.

Having said that, to actually do what you’re requesting, you could reset the name attribute of your checkboxes, so that they won’t be posted, and instead post a hidden field that holds the value of your checkboxes as a comma separated string:

$('#my-form').submit(function() {

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

    // stop checkboxes from being posted
    $('input[name=pet]').attr('name','');

    // have an input field be posted instead
    $('#my-hidden-field')
        .val(pets.join(','))
        .attr('name', 'pet');

});