使用 jQuery 重置 HTML 表单
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>
上面的代码将 jQuery 对象转换为 JavaScript 并使用 reset() 方法重置表单。见输出：
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook