在 JavaScript 中重置表单

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 在没有 jQuery 的 JavaScript 中重置表单
  2. 在 JavaScript 中使用 jQuery 重置表单
在 JavaScript 中重置表单

本教程将教我们如何使用和不使用 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 中重置表单 - 在没有 jquery 的情况下重置表单

上层解决方案是纯 JavaScript。resetForm() 函数在 Reset form 按钮单击时执行。

reset() 方法既不接受参数也不返回任何值。

在 JavaScript 中使用 jQuery 重置表单

请记住将 jQuery 库包含在 <head> 元素中以练习以下代码示例。

JavaScript 代码:

function resetForm() {
 	$("#form").trigger('reset')
}

输出:

在 javascript 中重置表单 - 使用 jquery 重置表单第一部分

上面的解决方案是用 jQuery 实现的。trigger() 函数触发特定事件和事件的默认行为(如表单提交),用于挑选出的元素。

trigger() 方法类似于 triggerHandler() 函数,除了 triggerHandler() 不会触发事件的默认行为。

以下是我们可以使用的另一个 jQuery 解决方案。它是 document.getElementById("form").reset(); 的反映。

JavaScript 代码:

function resetForm() {
 	$("#form")[0].reset();
}

输出:

在 javascript 中重置表单 - 使用 jquery 重置表单第二部分

请记住,如果表单的任何字段具有属性 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 avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相关文章 - JavaScript Form