Combine the same named fields when using JQuery serializeArray

Question

Hi I have the below example form

<form id="search" method="GET" action="/results">
    <input type="text" name="name">
    <input type="checkbox" name="rating" value="1">
    <input type="checkbox" name="rating" value="2">
    <input type="checkbox" name="rating" value="3">
    <input type="checkbox" name="rating" value="4">
    <input type="checkbox" name="rating" value="5">
    <input type="submit" value="Submit" name="submit">
</form>

When I submit the form after selecting some of the rating checkboxes and use JQuery serialize() as shown below

$('#search').submit(function() {
    var $form = $(this);
    var strFormData = $form.serialize();
    //var objFormData = $form.serializeArray();
    //var strFormDataParamResult = $.param(objFormData);
});

I get an example for strFormData like this

"name=help&rating=1&rating=2&rating=3"

Is there a way to combine any params with the same name into this result

"name=help&rating=1,2,3" 

by manipulating the result of serializeArray() and then using $.param(..) ?

If so does anyone have an example of this?

Thanks for any help.

Answer 1

If you use Johannes suggestion of a post then you should change the name attribute in your checkboxes to "rating[]".

Otherwise if you really need to do it with a GET you could try this:

$('#search').submit(function() {
   var serialized = $(this).serialize(),
       ratings = '';

   $('#search input[type=checkbox]:checked').map(function(i, n) {
       ratings += (i ? ',' : '') + n.value;
   });

   serialized += '&rating='+ratings;

   ...

});

Answer 2

This was my solution in the end.. serializeArray and manipulating the object that way seemed a bit complicated, the below isn't much better but it does what I want.

    // Combine key=value pairs in escaped serialised form data that have the same key
    // example: "&rating=5&rating=4&rating=3" becomes "&rating=5,4,3"
    function combineSerialisedFormData(strEscapedSerialisedFormData) {
        var arrFormData = strEscapedSerialisedFormData.split("&");
        var dictCombinedKeys = {};
        for (var i = 0; i < arrFormData.length; i++) {
            var arrParam = arrFormData[i].split("=");
            var strKey = arrParam[0];
            var strValue = arrParam[1];

                         if (strKey !== "" && strValue !== "") {
            if (typeof (dictCombinedKeys[strKey]) === "undefined") {
                dictCombinedKeys[strKey] = strValue;
            }
            else {
                dictCombinedKeys[strKey] += "," + strValue;
            }
                        }
        }

        // { name : "help" , rating : "5,4,3,2,1,0", test : "" }
        // change this object into an array of key value pairs like this
        // ["name=help","rating=5,4,3,2,1,0","test="]
        var arrKeyValuePairs = [];
        for (var key in dictCombinedKeys) {
            if (dictCombinedKeys.hasOwnProperty(key)) {
                arrKeyValuePairs.push(key + "=" + dictCombinedKeys[key]);
            }
        }

        return arrKeyValuePairs.join("&");
    }