在 JavaScript 中重置表單
Mehvish Ashiq
2023年1月30日
2022年5月10日
本教程將教我們如何使用和不使用 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"
Author: Mehvish Ashiq