用.serialize生成的querystring中的组值

Question

I have a form:

<form id="formFilter">    
    <input type="checkbox" name="type" id="type_red" value="red" ?>
    <label for="type_red">Red</label>

    <input type="checkbox" name="type" id="blue" value="Blue" ?>
<label for="type_blue">Blue</label>
</form>

Then, I am using this jQuery to serialize the fields:

fp("#formFilter").submit(function(){
    var querystring = fp(this).serialize();
    fp('#result').html(querystring);
    return false;
});

This returns the string type=Red&type=Blue

Except that I need a string like this: type=Red,Blue

I will appreciate if someone can point me in the right direction to accomplish this.

Answer 1

Change the name to make them group automagically, from:

<input type="checkbox" name="type" id="type_red" value="red" ?>

to

<input type="checkbox" name="type[]" id="type_red" value="red" ?>

This will group them on the serverside.

If for some strange reason all you're trying to do is create a string, you could do:

$("#formFilter").on('submit', function(){
    var qs = $(this).serializeArray(),
        q = {},
        querystring = "?";

    $.each(qs, function(idx, arr) {
        if (q[arr.name] === undefined) q[arr.name] = [];
        q[arr.name].push(arr.value);
    });

    $.each(q, function(name, value) {
        querystring += (name + "=" + value.join(',') + "&");
    });

    querystring = querystring.substring(0, querystring.length - 1);

    $('#result').html(querystring);
    return false;
});