重置表单 jQuery - JavaScript

在开发 Web 应用程序时，表单是非常重要的元素。当用户提交表单后，往往需要提供一种重置表单的方法，以方便用户重新填写表单。本文将介绍如何使用 jQuery 和 JavaScript 重置表单。

HTML 表单元素重置

在 HTML 中，表单元素有一个内置的方法 reset()，它可以用于重置表单。该方法会将所有表单字段重置为默认值。

以下是示例 HTML 表单：

<form>
  <label>姓名：</label>
  <input type="text" name="name" value="Tom"><br>

  <label>年龄：</label>
  <input type="number" name="age" value="25"><br>

  <label>邮箱：</label>
  <input type="email" name="email" value="tom@example.com"><br>

  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

在表单中，我们可以看到一个 reset 按钮。当用户点击该按钮时，表单将被重置，所有字段的默认值将被还原。

使用 jQuery 重置表单

同样，我们也可以使用 jQuery 来重置表单。在 jQuery 中，我们可以使用 val() 方法来设置字段的值。因此，我们只需遍历表单中的所有字段，将其值设为空或默认值即可实现表单的重置。

以下是示例代码：

// 绑定重置按钮事件
$('#reset-btn').click(function() {
  // 遍历表单中的所有输入框
  $('form :input').each(function() {
    // 如果该输入框为按钮，则跳过
    if ($(this).attr('type') === 'button') {
      return;
    }

    // 将输入框的值设为空或默认值
    $(this).val($(this).attr('defaultValue'));
  });
});

首先，我们为重置按钮绑定了一个点击事件。在事件处理程序中，我们使用 each() 方法遍历表单中的所有输入框。由于重置按钮也是一个输入框，因此我们需要排除它。接下来，我们可以使用 val() 方法将输入框的值设为空或默认值。

总结

本文介绍了如何使用 HTML、jQuery 和 JavaScript 重置表单。通过了解这些方法，我们可以更好地掌握 Web 应用程序的表单部分，从而更好地为用户提供便捷的交互体验。