如何使用带有 .reset() 方法的 jQuery 重置表单？

当我们需要重置一个表单的时候，我们可以使用 jQuery 的 .reset() 方法。这个方法会将表单中的所有字段都重置为它们原始的默认值，而不需要重新加载整个页面。

1. 在 HTML 中定义表单

首先，在 HTML 文件中定义表单。例如：

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

这个表单有两个字段：名字和电子邮件。提交按钮允许我们提交这些字段。

2. 使用 jQuery 选择表单并添加事件处理程序

接下来，我们需要使用 jQuery 来选择表单并添加事件处理程序。这个事件处理程序将在我们点击“重置”按钮时被调用。

$(document).ready(function() {
  $("#myForm").submit(function(event) {
    event.preventDefault();
    alert("Form submitted");
  });
  
  $("#resetBtn").click(function() {
    $("#myForm")[0].reset();
  });
});

我们选择表单并添加了一个提交事件处理程序。这个事件处理程序将阻止表单的默认行为，并弹出一个警告框告诉我们表单已经提交了。

我们还定义了一个 ID 为“resetBtn”的按钮，并添加了一个单击事件处理程序。这个事件处理程序调用表单的 .reset() 方法来将表单重置为它的初始值。

3. 执行并测试代码

最后，我们需要确保我们的代码能够工作。保存代码并在浏览器中打开 HTML 文件。当我们填写表单并单击“提交”按钮时，应该会弹出一个警告框，告诉我们表单已经提交了。

现在，我们单击“重置”按钮，我们应该会发现表单被重置为它最初的默认值，这个方法就是 .reset() 方法。

总结

在本文中，我们使用了 jQuery 的 .reset() 方法来重置表单。这个方法是非常简单易用的，并且可以在不重新加载整个页面的情况下重置表单。如果你需要重置表单，这是一个非常好的方法。