jQuery deserialize form

Question

I am using jQuery Serialize to serialize my form elements and would like to deserialize them back. Unfortunately can't find any working jQuery deserializer, any suggestions?

Answer 1

I wrote a version of jQuery.deserialize that supports serialized data generated from the serialize, serializeArray and serializeObject functions. It also supports all form element types, including checkboxes and radio buttons.

Answer 2

Try this:

function deparam(query) {
    var pairs, i, keyValuePair, key, value, map = {};
    // remove leading question mark if its there
    if (query.slice(0, 1) === '?') {
        query = query.slice(1);
    }
    if (query !== '') {
        pairs = query.split('&');
        for (i = 0; i < pairs.length; i += 1) {
            keyValuePair = pairs[i].split('=');
            key = decodeURIComponent(keyValuePair[0]);
            value = (keyValuePair.length > 1) ? decodeURIComponent(keyValuePair[1]) : undefined;
            map[key] = value;
        }
    }
    return map;
}

Answer 3

I was very interested in trying JQuery.deserialize, but it didn't seem to handle checkboxes at all, so it didn't serve my purposes. So I wrote my own. It turned out to be easier than I thought, because the jQuery val() function does most of the work:

jQuery.fn.deserialize = function (data) {
    var f = this,
        map = {},
        find = function (selector) { return f.is("form") ? f.find(selector) : f.filter(selector); };
    //Get map of values
    jQuery.each(data.split("&"), function () {
        var nv = this.split("="),
            n = decodeURIComponent(nv[0]),
            v = nv.length > 1 ? decodeURIComponent(nv[1]) : null;
        if (!(n in map)) {
            map[n] = [];
        }
        map[n].push(v);
    })
    //Set values for all form elements in the data
    jQuery.each(map, function (n, v) {
        find("[name='" + n + "']").val(v);
    })
    //Clear all form elements not in form data
    find("input:text,select,textarea").each(function () {
        if (!(jQuery(this).attr("name") in map)) {
            jQuery(this).val("");
        }
    })
    find("input:checkbox:checked,input:radio:checked").each(function () {
        if (!(jQuery(this).attr("name") in map)) {
            this.checked = false;
        }
    })
    return this;
};

You should be able to use this like this:

$("#myform").deserialize(data);

Where data is a parameter list such as what $("#myform").serialize() would produce.

It affects all fields in the form, and it will clear the values of fields that are not contained in the data. But you can also pass any selector to affect only specific fields, as you can with the serialize function. E.g.:

$("select").deserialize(data);

Answer 4

Half of jQuery Serialize is param(), so half of something that deserializes a query string is going to be a deparam. Unfortunately I haven't been able to find a good standalone deparam. For now I recommend getting the jQuery BBQ library and using that. If you don't need the other stuff you can remove them. I read somewhere that Ben Alman (cowboy) planned to extract deparam into its own module.

For the rest of deserializing, you'll just need to loop through the object that deparam returns and for each key and value pair in the object, select the form element based on the key, and set the form elements value to the value.

Answer 5

Bit late on this one, but somebody might find this useful.

function fetchInput(identifier) {
    var form_data = identifier.serialize().split('&');
    var input     = {};

    $.each(form_data, function(key, value) {
        var data = value.split('=');
        input[data[0]] = decodeURIComponent(data[1]);
    });

    return input;
}

Answer 6

I'm not now answering your question but my guess is that you want to serialize it and send back to server and then use the serialized data which is why you have to deserialize it?

If that's the case you should consider using .serializeArray(). You can send it as POST data in ajax, and then access later as well because you will have object.

Answer 7

Using Jack Allan's deparam function with jQuery, you can change this line:

map[key] = value;

to

$('input[name=' + key + ']').val(value);

Which will load the data back into your form fields.

Answer 8

this code returns an array when same key is spotted multiple times in the serialized string

    chaine="single=Single1&multiple=Multiple&multiple=Multiple1&multiple=Multiple2&multiple=Multiple3&check=check2&radio=radio1"
    function deserialize(txt){
    myjson={}
    tabparams=chaine.split('&')
    var i=-1;
    while (tabparams[++i]){
    tabitems=tabparams[i].split('=')
    if( myjson[decodeURIComponent(tabitems[0])] !== undefined ){
        if( myjson[decodeURIComponent(tabitems[0])] instanceof Array ){
            myjson[decodeURIComponent(tabitems[0])].push(decodeURIComponent(tabitems[1]))
        }
    else{
       myjson[decodeURIComponent(tabitems[0])]= [myjson[decodeURIComponent(tabitems[0])],decodeURIComponent(tabitems[1])]
            }
        }
    else{
         myjson[decodeURIComponent(tabitems[0])]=decodeURIComponent(tabitems[1]);
        }
    }
    return myjson;
    }

Answer 9

Needed all in a single string, which can be stored in maybe COOKIE, and later read and fill the same form with input values.

Input elements seperator: ~ (use any seperator)

Input attributes seperator: | (use any seperator)

input type | input name | input value ~ input2 type | input2 name | input2 value

var formData = '';
$('#form_id').find('input, textarea, select').each(function(i, field) {
    formData += field.type+'|'+field.name+'|'+field.value+'~';
});

Example:

hidden|vote_id|10~radio|option_id|~radio|option_id|427~radio|option_id|428~

Answer 10

If what you want is to remove the standard URL-encoded notation, you can use JavaScript's decodeURIComponent(), which will give you a regular string, just like this:

var decodedString = decodeURIComponent("Http%3A%2F%2FHello%3AWorld");
alert(decodedString);

In this case, decodedString will look like Http://Hello:World, here's a working fiddle.

Got all of this searching for this same issue, and found the answer here: How can I decode a URL with jQuery?

I know this is an old question, but doing some searches for jQuery deserialize got me here, so I might as well try to give a different approach on the issue for people with the same problem.

Answer 11

May be a bit late, but perhaps you are looking for something like JQuery.deserialize. Problems: no support for checkboxes or radio buttons.