1. 在表单(form)中,如果以标签<input type="submit"/>作为表单提交的触发方式,那么在浏览器提交网页之前,会触发表单(form)的onsubmit事件。这样只要在表单(form)的onsubmit属性中加入代码即可完成表单提交事件的捕捉和处理。
<html>
<body>
<form action="." method="GET" onsubmit="alert('catch and do something')">
<input type="submit"/>
</form>
</body>
</html>
点击提交按钮后,会有弹出框显示。
2. 如果表单的提交方式是直接调用表单的sumbit方法,那么表单的onsubmit方法将不会被触发。这样第1点所述的捕捉方法就会失效。
<html>
<body>
<form id="form1" action="." method="GET" onsubmit="alert('catch and do something')">
<input type="button" value="提交查询" onclick="form1.submit();"/>
</form>
</body>
</html>
点击提交按钮后,不会有弹出框显示。
解决办法: 劫持表单的submit属性,使其指向自定义函数,在这个函数中手动调用表单的onsubmit方法以及原先指向的那个submit方法。
<html>
<body>
<form id="form1" action="." method="GET" onsubmit="alert('catch and do something')">
<input type="button" value="提交查询" onclick="form1.submit();"/>
</form>
<script>
var func = document.forms[0].submit;
document.forms[0].submit=function(){
if(this.onsubmit() != false)
func.apply(this); // IE8 如果是IE6,7改为 func();
}
</script>
</body>
</html>
* 以上代码样例仅为配合解释事件捕捉及处理的原理,并非最优。在引用上述样例代码时,根据具体的情况,可能需要做一些改动才能使其正常运转。
分享到:
相关推荐
javascript方式防止表单重复提交,
javascript弹出层表单提交代码,就是点击按钮后,弹出一个form表单让你填写,等你填好后再提交
js验证表单大全,用JS控制表单提交 ,javascript提交表单
javascript表单事件汇总,纯文本格式
submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上。 在javaScript中关于submit和button的...
Javascript经典案例javascript表单验证及事件
1.实现JavaScript事件注册;...2.实现JavaScript事件处理函数; 3.实现JavaScript鼠标和键盘事件; 4.实现JavaScript表单相关事件; 5.实现JavaScript字幕滚动事件; 6.实现JavaScript编辑事件;
转义表单提交字符处理函数,可用于php或javascript的字符处理函数列表
大家在学习javascript的时候,可能会需要查资料。不管你是刚入门的,还是已经学了很久,你都很需要这份材料。
form表单提交方式总结一下: 一、利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址...
主要介绍了JavaScript获取网页表单action属性的方法,涉及javascript操作表单属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
第6章 JavaScript中的事件与事件处理
本文实例讲述了JavaScript获取网页表单提交方式的方法。分享给大家供大家参考。具体如下: JavaScript获取网页表单的提交方式是get还是post,获取提交方式可以通过表单的method属性获得 <!DOCTYPE html> <...
javascript表单事件处理方法详解.docx
一、javascript 页面加裁时自动提交表单: Form表单: <form method="post" id="myform" action="a.php"> <input type="submit" value="提交表单"> </form> javascript 代码: [removed] ...
Javascript_事件处理,讲解了JAVASCRIPT事件开发中注意的事项,步骤,有条理的讲解
这个JavaScript的关键是onChange()事件,使用onKeyUp()事件完成是不行的,人家没有输入完毕,你就说人家不对,多不友好啊╮(╯▽╰)╭ 一、基本目标 一个表单认证页,如果输入的用户名超过10位则会立即在输入框旁边...
使用JavaScript 完成表单的自动计算
博文链接:https://clarancepeng.iteye.com/blog/112040