在 JavaScript 中重置表單
Mehvish Ashiq
2023年10月12日
本教程將教我們如何使用和不使用 jQuery 在 JavaScript 中重置表單。reset() 方法將表單元素恢復為預設值。
JavaScript 中的 reset() 方法的功能與 HTML 重置按鈕相同。
對於所有 JavaScript 程式碼示例，以下 HTML 程式碼保持不變。
<!DOCTYPE html>
<html>
<body>
<p>
fill the text boxes with some text content and press the "Reset form" button to reset the form.
</p>
<form id="form">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br><br>
<input type="button" onclick="resetForm()" value="Reset form">
</form>
</body>
</html>
在沒有 jQuery 的 JavaScript 中重置表單
JavaScript 程式碼：
function resetForm() {
document.getElementById('form').reset();
}
輸出：
上層解決方案是純 JavaScript。resetForm() 函式在 Reset form 按鈕單擊時執行。
reset() 方法既不接受引數也不返回任何值。
在 JavaScript 中使用 jQuery 重置表單
請記住將 jQuery 庫包含在 <head> 元素中以練習以下程式碼示例。
JavaScript 程式碼：
function resetForm() {
$('#form').trigger('reset')
}
輸出：
上面的解決方案是用 jQuery 實現的。trigger() 函式觸發特定事件和事件的預設行為（如表單提交），用於挑選出的元素。
trigger() 方法類似於 triggerHandler() 函式，除了 triggerHandler() 不會觸發事件的預設行為。
以下是我們可以使用的另一個 jQuery 解決方案。它是 document.getElementById("form").reset(); 的反映。
JavaScript 程式碼：
function resetForm() {
$('#form')[0].reset();
}
輸出：
請記住，如果表單的任何欄位具有屬性 name="reset"，reset() 方法將不起作用。它給你以下錯誤。
'<a class=\'gotoLine\' href=\'#55:17] Uncaught TypeError: $(...)[0\'>55:17] Uncaught TypeError: $(...)[0</a>.reset is not a function'
作者： Mehvish Ashiq
