在 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