使用 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