HOWTO · jQuery
使用 jQuery 重置 HTML 表單
本教程演示如何使用 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() 方法重置表單。見輸出：
