首页 > 编程笔记 > JavaScript笔记 > JS事件
阅读:53
JS提交和重置form表单
本节示例讲解 JavaScript 的提交 form 表单和重置 form 表单。
在 <textarea> 文本区中按 Enter 键只会换行,不会提交表单。
以这种方式提交表单时浏览器会在将请求发送给服务器之前触发 submit 事件,用户有机会验证表单数据,并决定是否允许表单提交。
在实际应用中,会出现用户重复提交表单现象。例如,在第 1 次提交表单后,如果长时间没有反应,用户可能会反复单击提交按钮,这样容易带来严重后果,服务器反复处理请求组,或者错误保存用户多次提交的订单。解决方法:在第一次提交表单后禁用提交按钮,或者在 onsubmit 事件处理函数中取消表单提交操作。
提交表单
使用 <input> 和 <button> 标签都可以定义提交按钮,只要将 type 属性值设置为“submit”即可,而图像按钮则是通过将 <input> 的 type 属性值设置为“image”。当单击提交按钮或图像按钮时,就会提交表单。示例1
在下面示例中,当在表单内的文本框中输入文本之后,单击“提交”按钮会触发 submit 事件,该函数将禁止表单提交数据,而是弹出提示对话框显示输入的文本信息。<form id="form1" name="form1" method="post" action=""> <input type="text" name="t" id="t" /> <input name="" type="submit" /> </form> <script> var t = document.getElementsByTagName("input")[0]; // 获取文本框的引用指针 var f = document.getElementsByTagName("form")[0]; // 获取表单的引用指针 f.onsubmit = function(e){ // 在表单元素上注册submit事件处理函数 alert(t.value); return false; // 禁止提交数据到服务器 } </script>
示例2
在下面示例中,当表单内没有包含“提交”按钮时,在文本框中输入文本之后按 Enter 键也一样能够触发 submit 事件。<form id="form1" name="form1" method="post" action=""> <input type="text" name="t" id="t" /> </form> <script> var t = document.getElementsByTagName("input")[0]; // 获取文本框的引用指针 var f = document.getElementsByTagName("form")[0]; // 获取表单的引用指针 f.onsubmit = function(e){ alert(t.value); } </script>
在 <textarea> 文本区中按 Enter 键只会换行,不会提交表单。
以这种方式提交表单时浏览器会在将请求发送给服务器之前触发 submit 事件,用户有机会验证表单数据,并决定是否允许表单提交。
示例3
阻止事件的默认行为可以取消表单提交。下面示例先验证文本框中是否输入字符,如果为空,则调用 preventDefault() 方法阻止表单提交。<form id="form1" name="form1" method="post" action=""> <input type="text" name="t" id="t" /> </form> <script> var t = document.getElementsByTagName("input")[0]; // 获取文本框的引用指针 var f = document.getElementsByTagName("form")[0]; // 获取表单的引用指针 f.onsubmit = function(e){ if(t.value.length < 1){ var event = e || window.event; if (event.preventDefault){ event.preventDefault(); } else { event.returnValue = false; } } } </script>
示例4
如果要禁止按 Enter 键提交响应,可以监测键盘响应,当按下 Enter 键时设置其返回值为 false,从而取消键盘的默认动作,禁止按 Enter 键提交响应行为。<form id="form1" name="form1" method="post" action=""> <input type="text" name="t" id="t" /> </form> <script> var t = document.getElementsByTagName("input")[0]; // 获取文本框引用指针 t.onkeypress = function(e){ // 为文本框绑定键盘keypress事件处理函数 var e = e || window.event; // 标准化事件对象 return e.keyCode != 13; // 当按下回车键时,设置返回值为false,禁止默认键盘行为 } </script>
示例5
调用 submit() 方法也可以提交表单,这样就不需要表单包含“提交”按钮,任何时候都可以正常提交表单。<form id="form1" name="form1" method="post" action=""> <input type="text" name="t" id="t" /> </form> <script> var t = document.getElementsByTagName("input")[0]; // 获取文本框的引用指针 var f = document.getElementsByTagName("form")[0]; // 获取表单的引用指针 t.onchange = function(){ f.submit(); } </script>调用 submit() 方法不会触发 submit 事件,因此在调用此方法之前要先验证表单数据。
在实际应用中,会出现用户重复提交表单现象。例如,在第 1 次提交表单后,如果长时间没有反应,用户可能会反复单击提交按钮,这样容易带来严重后果,服务器反复处理请求组,或者错误保存用户多次提交的订单。解决方法:在第一次提交表单后禁用提交按钮,或者在 onsubmit 事件处理函数中取消表单提交操作。
重置表单
为 <input> 或 <button> 标签设置 type="reset" 属性可以定义重置按钮。<input type="reset" value="重置按钮"> <button type="reset">重置按钮</button>当单击重置按钮时,表单将被重置,所有表单字段恢复为初始值。这时会触发 reset 事件。
示例1
下面示例设计当单击【重置】按钮时,弹出提示框,显示文本框中的输入值,同时恢复文本框的默认值,如果没有默认值,则显示为空。<form id="form1" name="form1" method="post" action=""> <input type="text" name="t" id="t" /> <input name="" type="reset" /> </form> <script> var t = document.getElementsByTagName("input")[0]; // 获取文本框的引用指针 var f = document.getElementsByTagName("form")[0]; // 获取表单的引用指针 f.onreset = function(e){ // 在表单元素上注册reset事件处理函数 alert(t.value); } </script>
示例2
也可以利用这个机会,在必要时取消重置操作。下面示例检测文本框中的值,如果输入 10 个字符以上,就不允许重置了,避免丢失输入的文本。<form id="form1" name="form1" method="post" action=""> <input type="text" name="t" id="t" /> <input type="reset" value="重置按钮"> </form> <script> var t = document.getElementsByTagName("input")[0]; // 获取文本框的引用指针 var f = document.getElementsByTagName("form")[0]; // 获取表单的引用指针 f.onreset = function(e){ if(t.value.length > 10){ var event = e || window.event; if (event.preventDefault){ event.preventDefault(); } else { event.returnValue = false; } } } </script>用户也可以使用 form.reset() 方法重置表单,这样就不需要包含重置按钮。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频