javascript - HTML 重置按钮与使用 jQuery 设置的文本字段值相结合

Question

我有这个 HTML 表单:

<form action="#" method="post">
    <label for="label-id">id</label>
    <input type="text" name="id" id="label-id" />
    <label for="label-name">Name</label>
    <input type="text" name="name" id="label-name" />
    <label for="label-description">Description</label>
    <input type="text" name="description" id="label-description" />
    <input type="reset" value="Cancel" />
    <input type="submit" value="Update" />
</form>

其中没有值，因为我通过 jQuery(AJAX 调用后端系统)以这种方式设置值:

$('#label-id').val(data.id);
$('#label-name').val(data.name);
$('#label-description').val(data.description);

所以，如果我按下 input type="reset"按钮，所有值都是空的。但我希望，按下按钮，我在 jQuery 中用上面三行设置的值应该在那里。

例如。AJAX 调用为我提供了数据 id=12、name="test"、description="my desc"，这些值设置为文本输入字段，我看到了这些值。现在有人正在将 name="test"更改为“test123”。按重置按钮，该值应为 name="test"而不是 "test123"。

我该怎么做？

预先感谢您并致以最诚挚的问候。

Answer 1

如果您存储数据对象并为其创建函数，您可以这样做，例如:

var currentData;

确保它位于所有内容之外，以便其范围正确......例如你的ready处理程序甚至全局。 ...并将字段重置转换为函数:

function resetForm() {
  $('#label-id').val(currentData.id);
  $('#label-name').val(currentData.name);
  $('#label-description').val(currentData.description);
}

然后在你的success中运行上述代码的处理程序，存储您的 data (您当前正在使用的)并运行我们使用它创建的函数，例如:

currentData = data;
resetForm();

现在您可以在 reset 上使用相同的功能事件<form>并停止正常重置，如下所示:

$("form").bind("reset", function(e) {
  resetForm();
  e.preventDefault();
});