AJAX提交后重置HTML表单

Question

我有一个带有重置和提交按钮的简单HTML表单，该表单是使用AJAX调用提交的。

在任何提交之前，重置按钮正在恢复表单的初始状态，我可以接受它！

提交表单后，如果我修改了输入值，我希望重置按钮恢复上次成功提交表单后的状态！

有什么方法可以执行此操作而无需重新加载或重新创建表单吗？

最诚挚的问候，

蒂埃里

Answer 1

这取决于您提交表单的方式，但是通常，对于ajax，没有任何重定向，因此唯一的问题是将当前输入的数据删除为其默认值。

简单，在表单加载开始时（可能是在页面加载时，但是如果它是在某种方式之后生成的，则在其生成之后立即生成），只需循环遍历表单的各个元素并跟踪值并将其存储到某种字典或数组，然后，在提交ajax之后，重新遍历表单并将值重置为之前的其他对应值。

例如，如果我有一个ID为“ testForm”的表单

let list = Array.apply(0, testForm.elements).map(x=>({name:x.name, value:x.value}))

...做ajax的东西，然后提交表单后：

Array.apply(0, testForm.elements).forEach((x, i) => {
    x.name = list[i].name;
    x.value = list[i].value
});

应该将其重置为默认值。。可能不必重置名称，但是可能在理论上进行了更改。。

Answer 2

主要思想-保存状态

const input = document.getElementById("name");
const reset = document.getElementById("btn-reset");
const save = document.getElementById("btn-save");

const state = {
  name: ''
};

save.addEventListener('click', () => {
  // send AJAX
  const value = input.value;
  setTimeout(() => {
    const serverResponse = {name: value};
    state.name = serverResponse.name;
  }, 1000)
});

reset.addEventListener('click', () => {
  input.value = state.name
});

<input id="name" value="">
<button id="btn-reset">Reset</button>
<button id="btn-save">Save</button>