Question

我有一个高度动态的形式，与顶级元素交互将完全转换表单底层部分的元素。我想要一种简单的方法来维护状态，这样如果用户部分输入顶级类别之一的表单数据，他们可以切换到其他东西（暂时丢失他们键入的所有数据以及实际的输入元素）然后单击返回上一个顶级类别并按原样恢复所有内容。

我正在计划一些简单的事情，比如点击顶级元素，做类似的事情：

form_state[category] = $('form').html();

category = this.val();

if (form_state[category]) {
  $('form').html(form_state[category])
}

但是，我很快发现表单的html不包括用户与之交互的表单元素的值（它是所有原始默认值）。所以我意识到我需要收集表单中元素的所有值，然后在重置表单的内部html后手动重置它们......所以我想的是：

$('input, select, textarea').each(function(el) {
  values.push($(el).val());
}

然后重新迭代这些并使用类似的内容更新元素：

if (form_state[category]) {
  $('form').html(form_state[category])
  $('input, select, textarea').each(function(el, i) {
    $(el).val(values[i]);
  }
}

但我只是想知道是否有人之前遇到过这样的事情而且知道一个更好的解决方案而不是手动迭代这些？我想知道是否有任何方法可以执行反向form.serialize（）？这样我就可以存储一个序列化的表单快照，并使用序列化数据更新整个表单。由于.serlize（）返回一个转义字符串，看起来它可能比它的工作更多，并且手动迭代表单元素类型是更好的方法......？

Answer 1

使用$('form').serializeArray()代替，它会为您提供一个很好的JSON对象，以后可以用它来重新填充表单。

您可能还想避免隐藏字段$('form :input:not(:hidden)').serializeArray()

此SO post会指示您重新填充。

Answer 2

我认为你可以在form_state[category] = $('form').html();

之前做这样的事情

$("form input, form select").each(function(){
   $(this).attr("value", this.value);
});

这应该用它们的当前值更新html选择和输入元素。然后您保存的html将反映当前的用户输入状态。

试图获取表单的“快照”但却失去了价值

2 个答案: