jQuery插件序列化一个表单,还恢复/填充表单？

Question

是否有一个jQuery插件可以序列化一个表单,然后恢复/填充给定序列化值的表单？我知道表单插件可以序列化为查询字符串,但我没有找到任何可以从查询字符串中恢复表单的内容.

我想要做的是序列化表单值,每当表单更改时存储为cookie,然后在页面首次加载时从cookie中恢复表单(如果存在).

我已经找到了这个难题的部分(形式插件,cookie插件,各种自动保存插件不能恢复),但在我从各个部分拼凑一些东西之前,我想确保没有一个很好的罐装解决方案等待对我来说.

谢谢!

吉姆

Answer 1

这是我根据其他人的工作推出的一些东西,特别是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

我对巴拿巴的答案扩展如下:

1. 支持具有相同名称的多个输入(复选框通常执行此操作).

2. 尽可能缓存选择器,删除不需要的$

       /* 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;
           }
       };
   

Answer 3

感谢Barnabas Kendall的初始功能和EggertJóhannesson的单选按钮修复!

我遇到了复选框的问题,如果没有检查它们将不会被放入数组,到目前为止一直很好.但是,由于未选中复选框的状态,如果用户在编辑表单期间检查了它们,则无法恢复此状态.

所以我扩展了还原功能以取消选中不在数据数组中的所有复选框,这将确保无论表单中执行还原之前更改了什么,都会正确恢复复选框的状态:

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);
}

功能齐全:

$.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);
    }
};