使用 jQuery 重置 HTML 表单

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

使用 jQuery 重置 HTML 表单

作者：迹忆客最近更新：2024/03/24 浏览次数：

jQuery 没有类似 JavaScript 的 reset() 方法，但我们可以使用 jQuery 的 trigger() 方法来重置 HTML 表单。本教程演示如何使用 trigger() 方法在 jQuery 中重置 HTML 表单。

在 jQuery 中使用 `trigger()` 方法重置 HTML 表单

trigger() 方法可以触发选定元素上的指定事件处理程序。我们可以将此方法与 reset 参数一起使用来重置 HTML 表单。

trigger() 方法重置表单的语法是：

$("Form").trigger("reset");

Form 是表单的选择器，它可以是 id、class 或 form 关键字。

让我们尝试一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ResetForm Using JQuery</title>
</head>
<body>
    <form action="" method="post" id="DemoForm">
        <label>Name:</label>
        <input type="text" name="name">
        <br><br>
        <label>ID:</label>
        <input type="text" name="id">
        <br><br>
        <label>Address:</label>
        <input type="text" name="address">
        <br><br
        <label>Salary:</label>
        <input type="number" name="salary">
        <input type="submit" value="Submit">
    </form>
    <br>
    <button type="button" id='ResetButton'>Reset Form</button>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#ResetButton").click(function(){
            $("#DemoForm").trigger("reset");
        });
    });
    </script>
</body>
</html>

上面的代码将在按钮单击时重置表单。见输出：

创建一个 jQuery 表单对象并使用 JavaScript 的 `reset()` 方法重置 HTML 表单

在 jQuery 中重置表单的另一种方法是，我们可以创建表单的 jQuery 对象并使用 JavaScript reset() 方法重置它。此方法的语法是：

$("#DemoForm")[0].reset()

[0] 会将 jQuery 对象转换为 JavaScript 对象，然后应用 reset() 方法。

有关此方法，请参见以下示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reset Form Using JQuery</title>
</head>
<body>
    <form action="" method="post" id="DemoForm">
        <label>Name:</label>
        <input type="text" name="name">
        <br><br>
        <label>ID:</label>
        <input type="text" name="id">
        <br><br>
        <label>Address:</label>
        <input type="text" name="address">
        <br><br
        <label>Salary:</label>
        <input type="number" name="salary">
        <input type="submit" value="Submit">
    </form>
    <br>
    <button type="button" id='ResetButton'>Reset Form</button>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
    $(document).ready(function() {
            $("ResetButton").click(function() {
                $("#DemoForm")[0].reset()
            });
        });
    </script>
</body>
</html>