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

Answer 1

Thanks to Barnabas Kendall for initial function and Eggert Jóhannesson for radio button fix!

I encountered an issue with checkboxes, if they are not checked they won't be put into the array, so far so good. But as the state of checkboxes is not stored when they are not checked I couldn't restore this state if the user had checked them during editing the form.

So I extended the restore functionality to uncheck all checkboxes which are not in the data array, this will ensure the state of checkboxes is restored correctly no matter what was changed in the form before executing restore:

if (this.name && data[this.name]) {
   if(this.type == "checkbox" || this.type == "radio") {
       $(this).prop("checked", (data[this.name] == $(this).val()));
   } else {
       $(this).val(data[this.name]);
   }
} else if (this.type == "checkbox") {
   $(this).prop("checked", false);
}

Complete function:

$.fn.values = function(data) {
   var inps = $(this).find(":input").get();

    if(typeof data != "object") {
       // return all data
        data = {};

        $.each(inps, function() {
            if (this.name && (this.checked
                        || /select|textarea/i.test(this.nodeName)
                        || /text|hidden|password/i.test(this.type))) {
                data[this.name] = $(this).val();
            }
        });
        return data;
    } else {
        $.each(inps, function() {
            if (this.name && data[this.name]) {
                if(this.type == "checkbox" || this.type == "radio") {
                    $(this).prop("checked", (data[this.name] == $(this).val()));
                } else {
                    $(this).val(data[this.name]);
                }
            } else if (this.type == "checkbox") {
                $(this).prop("checked", false);
            }
       });
       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;
           }
       };