jQuery插件序列化的形式，也恢复/填充表单？(jQuery plugin to serializ

是否有一个jQuery插件，有可以序列化的形式，再后来恢复/填充的形式给出的序列化值？ 我知道这个插件可以序列作为查询字符串，但我还没有发现任何东西，从查询字符串还原形式。

我想要做的是序列化表单值，存储作为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:

感谢巴拿巴肯德尔初始功能和埃盖特为Jó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);
    }
};

Answer 4:

A big thank you to Barnabas Kendall for his answer, very useful.

However I found 1 error in it regarding restoring radio buttons, where instead of selecting the correct one it just copied the saved value to all buttons in group.

Fortunately it's simple to fix. Just replace

if(this.type == 'checkbox') {

With

if(this.type == 'checkbox' || this.type == 'radio') {

and it will correctly update radio buttons

Answer 5:

• 支持具有相同名称的多个输入（复选框通常这样做）。
• 缓存选择器时可能
• 返回值对于所有输入，如果checkbox或radio未设置，则该值是null

• 停用checkbox或radio如果值为null

   $.fn.formData = function(values) { var form = $(this); var inputs = $(':input', form).get(); var hasNewValues = typeof values == 'object'; if (hasNewValues) { $.each(inputs, function() { var input = $(this); var value = values[this.name]; if (values.hasOwnProperty(this.name)) { switch (this.type) { case 'checkbox': input.prop('checked', value !== null && value); break; case 'radio': if (value === null) { input.prop('checked', false); } else if (input.val() == value) { input.prop("checked", true); } break; default: input.val(value); } } }); return form; } else { values = {}; $.each(inputs, function() { var input = $(this); var value; switch (this.type) { case 'checkbox': case 'radio': value = input.is(':checked') ? input.val() : null; break; default: value = $(this).val(); } values[this.name] = value; }); return values; } }; 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Answer 6:

看看我的jQuery插件填充：

http://www.keyframesandcode.com/code/development/javascript/jquery-populate-plugin/

填充所有的表单元素以及标签和任何包含的HTML元素。

Answer 7:

如果你需要处理这种情况： <input name="this[is][my][input][]" /> -和你的，贪婪的家伙，需要分析整个矩阵：

要填充：

http://www.keyframesandcode.com/resources/javascript/jQuery/demos/populate-demo.html

要检索值：

使用$('form').serialize()和将结果传递这个函数：

http://phpjs.org/functions/parse_str/

Answer 8:

序列化到一个字符串： var s = $('form').first().serialize();

： 恢复基于该字符串$('form').first().deserialize(s);

当然，你需要一个derserialize插件，比如我的一个原本张贴在这里 。

$.fn.deserialize = function (serializedString) 
{
    var $form = $(this);
    $form[0].reset();
    serializedString = serializedString.replace(/\+/g, '%20');
    var formFieldArray = serializedString.split("&");

    // Loop over all name-value pairs
    $.each(formFieldArray, function(i, pair){
        var nameValue = pair.split("=");
        var name = decodeURIComponent(nameValue[0]);
        var value = decodeURIComponent(nameValue[1]);
        // Find one or more fields
        var $field = $form.find('[name=' + name + ']');

        // Checkboxes and Radio types need to be handled differently
        if ($field[0].type == "radio" || $field[0].type == "checkbox") 
        {
            var $fieldWithValue = $field.filter('[value="' + value + '"]');
            var isFound = ($fieldWithValue.length > 0);
            // Special case if the value is not defined; value will be "on"
            if (!isFound && value == "on") {
                $field.first().prop("checked", true);
            } else {
                $fieldWithValue.prop("checked", isFound);
            } 
        } else { // input, textarea
            $field.val(value);
        }
    });
    return this;
}

更多信息： https://stackoverflow.com/a/24441276/1766230

这里有一个的jsfiddle，它可以让你玩的设定值，结算，复位和“反序列化”： http://jsfiddle.net/luken/4VVs3/

文章来源: jQuery plugin to serialize a form and also restore/populate the form?