jQuery plugin to serialize a form and also restore/populate the form?

Question

Is there a jQuery plugin out there that can serialize a form, and then later restore/populate the form given the serialized value? I know the form plugin can serialize as a querystring, but I haven't found anything that will restore the form from the querystring.

What I'd like to do is serialize the form values, store as a cookie whenever the form changes, and then restore the form from the cookie (if it exists) when the page first loads.

I have found pieces of this puzzle out there (form plugin, cookie plugin, various autosave plugins that don't restore), but before I cobble something together from various parts, I wanted to make sure there wasn't a nice canned solution waiting for me out there.

Thanks!

Jim

Answer 1

Here's a little something I rolled based on work of others, specifically serializeAnything:

/* jQuery.values: get or set all of the name/value pairs from child input controls     * @argument data {array} If included, will populate all child controls.  * @returns element if data was provided, or array of values if not */  $.fn.values = function(data) {     var els = $(this).find(':input').get();      if(typeof data != 'object') {         // return all data         data = {};          $.each(els, function() {             if (this.name && !this.disabled && (this.checked                             || /select|textarea/i.test(this.nodeName)                             || /text|hidden|password/i.test(this.type))) {                 data[this.name] = $(this).val();             }         });         return data;     } else {         $.each(els, function() {             if (this.name && data[this.name]) {                 if(this.type == 'checkbox' || this.type == 'radio') {                     $(this).attr("checked", (data[this.name] == $(this).val()));                 } else {                     $(this).val(data[this.name]);                 }             }         });         return $(this);     } }; 

Answer 2

Ive expanded upon Barnabas answer with the following:

1. Support multiple inputs with same name (checkboxes usually do this).

2. Cache selectors when possible, remove unneeded use of $

       /* jQuery.values: get or set all of the name/value pairs from child input controls         * @argument data {array} If included, will populate all child controls.      * @returns element if data was provided, or array of values if not     */      $.fn.values = function(data) {         var els = this.find(':input').get();          if(arguments.length === 0) {             // return all data             data = {};              $.each(els, function() {                 if (this.name && !this.disabled && (this.checked                                 || /select|textarea/i.test(this.nodeName)                                 || /text|hidden|password/i.test(this.type))) {                     if(data[this.name] == undefined){                         data[this.name] = [];                     }                     data[this.name].push($(this).val());                 }             });             return data;         } else {             $.each(els, function() {                 if (this.name && data[this.name]) {                     var names = data[this.name];                     var $this = $(this);                     if(Object.prototype.toString.call(names) !== '[object Array]'){                         names = [names]; //backwards compat to old version of this code                     }                     if(this.type == 'checkbox' || this.type == 'radio') {                          var val = $this.val();                         var found = false;                         for(var i = 0; i < names.length; i++){                             if(names[i] == val){                                 found = true;                                 break;                             }                         }                         $this.attr("checked", found);                     } else {                         $this.val(names[0]);                     }                 }             });             return this;         }     };