javascript - 将表单数据保存到序列化数组 Javascript 后重新填充表单

Question

我正在创建一个我希望用户能够编辑的表单。用户将填写表格、保存该表格、用下一个条目填写表格、保存该表格等。每次保存表格时都会创建一个可点击的 div，以便用户可以返回并查看他们的输入以确保他们在最终提交所有表格之前都是正确的。我已经能够保存表单数据:

    var formArray = $('form#popsetForm').serializeArray();

我的问题:我现在想在用户单击 div 时用 formArray 中的数据填充表单。是否有一个简单的命令可以让我只提供数组作为输入，它会自动填写表格？下面不是真正的代码，但我希望存在。

    $('form#popsetForm').populate(formArray)

Answer 1

我不知道是否已经存在解决方案，但像这样的解决方案应该适用于 serializeArray。

function restoreForm(form, formArray) {
  formArray.forEach(function (pair) {
    var selector = `input[name="${ pair.name }"], textarea[name="${ pair.name }"]`
    var input = $(form).find(selector)
    input.val(pair.value);
  })
}

https://jsfiddle.net/aycnx0gd/4/

或者对于普通的 ol' formData

function restoreForm(form, formData) {
  for (var key of formData.keys()) {
    var selector = `input[name="${ key }"], textarea[name="${ key }"]`
    var input = $(form).find(selector)
    var newVal = formData.get(key)
    input.val(newVal);
  }
}

https://jsfiddle.net/aycnx0gd/2/