试图得到一个“快照”.一种形式，但我失去了价值

Trying to get a "snapshot" of a form but am losing the values

本文关键字：失去 一种 一个 快照      更新时间：2023-09-26

我有一个高度动态的表单，其中与顶层元素的交互将完全转换表单低层部分的元素。我想要一种简单的方法来维护状态，这样，如果用户在表单中部分地输入了顶级类别之一的数据，他们就可以切换到其他东西(暂时丢失他们键入的所有数据以及实际的输入元素)，然后单击回到之前的顶级类别并恢复一切。

我计划做一些简单的事情，比如，在点击顶层元素时，做一些像:

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

但我只是想知道是否有人遇到过这样的事情之前，知道一个更好的解决方案比手动迭代这些?我想知道是否有任何方法来做一个反向形式。serialize()?这样我就可以存储一个序列化的表单快照，并用序列化的数据更新整个表单。由于. serize()返回一个转义字符串，似乎它可能比它的工作和手动迭代表单元素类型是一个更好的方式去…div ?

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

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

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

之前这样做
$("form input, form select").each(function(){
   $(this).attr("value", this.value);
});

应该用当前值更新html select和input元素。然后你保存的html将反映当前用户的输入状态

相关文章：