Question

我一直在使用一个简单的每个函数来反序列化表单：

  data = { key : val, ... };
  form = $('#formId');
  $.each(data, function(val,i) {
    form.find('*[name="' + val + '"]').val(data[val]);
  });

但我似乎无法让它适用于非标准表单元素（即单选按钮/复选框）。几个小时以来，我一直在玩不同的例子，无法让它发挥作用。有人知道这个优雅的解决方案吗？

Answer 1

试试这个：

example

HTML：

<form id="formId">
    a: <input name="a" /><br />
    b: <input name="b" /><br />
    c: <input type="checkbox" name="c" /><br />
    d: <select name="d"><option value="d1">d1</option><option value="d2">d2</option></select><br />
    e: <input type="radio" value="1" name="e" /><br />
    e: <input type="radio" value="2" name="e" /><br />
    e: <input type="radio" value="3" name="e" /><br />
    f: <input type="checkbox" name="f" /><br />
</form>

JS：

var 
    data = { a: "value for a", b: "value for b", c: false, d:"d2", e: "2", f:true },
   form = $('#formId');

   $.each(data, function(i, el) {

      var 
          fel = form.find('*[name="' + i + '"]'),
          type = "", tag = "";

       if (fel.length > 0) {

           tag = fel[0].tagName.toLowerCase();

           if (tag == "select" || tag == "textarea") { //...
              $(fel).val(el);
           }
           else if (tag == "input") {
              type = $(fel[0]).attr("type");
               if (type == "text" || type == "password" || type == "hidden") {
                  fel.val(el);
               } 
               else if (type == "checkbox") {
                  if (el)  
                     fel.attr("checked", "checked"); 
               }
               else if (type == "radio") {
                   fel.filter('[value="'+el+'"]').attr("checked", "checked"); 
               }
           }
       }
   })

Answer 2

也许像this这样的插件可以提供帮助。

$('#form-id').deserialize([{'name':'firstname','value':'John'},{'name':'lastname','value':'Resig'}]);

看起来它在几年内没有更新。

所有输入的jQuery表单反序列化

2 个答案: