jQuery插件序列化一个窗体并还原/填充窗体？ [英] jQuery plugin to serialize a form and also restore/populate the form?

问题描述

有没有可以序列化表单的jQuery插件，然后在给定序列化值的情况下还原/填充表单？我知道表单插件可以序列化为查询字符串，但是我还没有找到任何能够从查询字符串恢复表单的内容。

我想要做的是序列化表单值，在表单更改时将其作为cookie存储，然后在页面首次加载时从cookie中恢复表单（如果存在）。

发现了这个拼图（表单插件，cookie插件，各种不恢复的自动保存插件），但在我从各个部分拼凑出一些东西之前，我想确保没有一个很好的解决方案等着我

谢谢！

Jim

解决方案

以下是我根据他人的工作推出的一些内容，特别是 serializeAnything ：

  / * jQuery。值：获取或设置所有o f来自子输入控件的名称/值对
 * @argument data {array}如果包含，将填充所有子控件。 
 *如果提供了数据，则返回@returns元素，或者如果不包含数值，则返回数组
 * / 
 
 $ .fn.values = function（data）{
 var els = $（this）.find（'：input'）。get（）; 
 
 if（typeof data！='object'）{
 //返回所有数据
 data = {}; $（this.name&&！this.disabled&&&（this.checked 
 || / select | textarea / i.test（this.nodeName）
 || /text|hidden|password/i.test(this.type）））{
 data [this.name] = $（this ）.val（）; 
} 
}）; 
返回数据; 
} else {
 $ .each（els，function（）{
 if（this.name&&& data [this.name]）{
 if（this。类型=='checkbox'|| this.type =='radio'）{
 $（this）.attr（checked，（data [this.name] == $（this）.val（） ））; 
} else {
 $（this）.val（data [this.name]）; 
} 
} 
}）; 
返回$（this）; 
} 
}; 
  

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

解决方案

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

这篇关于jQuery插件序列化一个窗体并还原/填充窗体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！