迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

在 JavaScript 中重置表单

作者:迹忆客 最近更新:2024/03/22 浏览次数:

本教程将教我们如何使用和不使用 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'

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 JavaScript 中闪烁文本

发布时间:2024/03/22 浏览次数:119 分类:JavaScript

本文将介绍如何通过窗口对象加载函数、onload 属性和使用 JavaScript 的 jQuery 约定来执行文本闪烁。

在 JavaScript 中高亮显示文本

发布时间:2024/03/22 浏览次数:103 分类:JavaScript

本教程向我们展示了如何使用 JavaScript 高亮显示文本。将用于此目的的方法是 searchPrompt 方法和标记标记方法,将使用代码段详细说明。

在 JavaScript 中创建哔声

发布时间:2024/03/22 浏览次数:119 分类:JavaScript

JavaScript 不具有任何直接的方法或属性来警告哔声或在特定函数上产生任何声音。但是该任务可以通过添加音频源并使用 JavaScript 音频功能使用 HTML 标记来完成。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便