form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。
在处理表单提交的时候遇到一个问题，通常用<input type="submit" value="提交" />按钮来提交form，再监听form的onsubmit事件就能在前端处理表单验证的事情。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="form" action="http://www.a.com" method="post">
<input type="submit" value="提交" />
</form> <script>
var form =document.getElementById("form");
form.onsubmit = function(){
alert("表单提交了")
}
</script>
</body>
</html>
以上代码很顺利，没有任何问题。
当用别的元素来触发form的提交时确不会触发onsubmit事件。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="form" action="http://www.a.com" method="post">
<input type="submit" value="提交" />
</form>
<a href="javascript:void(0)" id="txtBtn">提交</a>
<script>
var form =document.getElementById("form"),
txtBtn = document.getElementById("txtBtn"); txtBtn.onclick = function(){
form.submit();
}
form.onsubmit = function(){
alert("表单提交了")
}
</script>
</body>
</html>
当点击a链接的提交时以为会弹出：表单提交了，可是没有，但表单内容是提交了的，但没有触发onsubmit事件。查了下手册，原文如下：
The submit method does not invoke the onsubmit event handler. Call the onsubmit event handler directly. When using Microsoft® Internet Explorer 5.5 and later, you can call the fireEvent method with a value of onsubmit in the sEvent parameter.
关于fireEvent的介绍，可以看这里：http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx
于是加上fireEvent。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="form" action="http://www.a.com" method="post">
<input type="submit" value="提交" />
</form>
<a href="javascript:void(0)" id="txtBtn">提交</a>
<script>
var form =document.getElementById("form"),
txtBtn = document.getElementById("txtBtn"); txtBtn.onclick = function(){
form.fireEvent('onsubmit');
form.submit();
} form.onsubmit = function(){
alert("表单提交了")
} </script>
</body>
</html>
以上代码如愿的弹出：表单提交了，用a标签提交也能触发onsubmit事件了。
到此为止以为OK了，可是在chrome和firefox下依然不行。百度GOOGLE一翻，找到了解决方法，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="form" action="http://www.a.com" method="post">
<input type="submit" value="提交" />
</form>
<a href="javascript:void(0)" id="txtBtn">提交</a>
<script>
var form =document.getElementById("form"),
txtBtn = document.getElementById("txtBtn"); txtBtn.onclick = function(){
var result;
if(form.fireEvent){
//IE浏览器
result=form.fireEvent('onsubmit');
}else{
//FIREFOX\CHROME等标准浏览器
var evt = document.createEvent('HTMLEvents');
evt.initEvent('submit',false,true);
result=form.dispatchEvent(evt);
}
if(result){
form.submit();
} } form.onsubmit = function(){
alert("表单提交了")
} </script>
</body>
</html>
完美解决问题，各浏览器下表现一致了！
关于firefox,chrome等标准浏览器的实现中所用到的方法，具体描述看下面几个链接：
http://www.w3school.com.cn/xmldom/met_document_createevent.asp
http://www.w3school.com.cn/xmldom/met_element_dispatchevent.asp
http://www.w3school.com.cn/jsref/event_initevent.asp
form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。的更多相关文章
- vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方式
vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方式 #Region "WPF 当浏览器窗体关闭 ...
- easyui combobox setValue方法不能触发onSelect事件
//setValue方法不能触发onSelect事件 //$("#FundingSource").combobox("setValue", data.Fundi ...
- jquery on绑定事件叠加解决方法
jquery on绑定事件叠加解决方法 代码如下 <pre> $('.maoqiu').each(function () { var is_bind = $(this).attr('is_ ...
- Jquery方法load之后导致js失效解决方法
Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...
- Jmeter: PATCH方法无法发送参数的暂时解决方法
Jmeter: PATCH方法无法发送参数的暂时解决方法 最近在做API测试,前面的GET这些HTTP Request方法都无压力,顺利解决. 但碰到PATCH方法时,发现无法通过. 通过对比,发现P ...
- [Phonegap+Sencha Touch] 移动开发26 Android下的sencha touch程序，转屏时，Ext.Viewport不能触发orientationchange事件的解决的方法
Sencha touch 2.4.2 已经解决问题了. 比方你为Ext.Viewport的orientationchange事件加入了一个监听方法: Ext.Viewport.on('orientat ...
- 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
- onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...
- echarts 图的点击事件(含：点击重复触发的问题及其解决方法)
今天用echarts的时候发现一个问题 鼠标指向不同地市触发一个事件展示该地区趋势图 但是但是后台中不管我第几次鼠标指向都会触发两次指向事件 现在贴出解决办法: 问题完美解决.但是为什么会调用两次, ...
随机推荐
- [转]Centos 7 安装部署 GitLab 服务器
Centos 7 安装部署 GitLab 服务器 转自:https://www.jianshu.com/p/79bfded68899 文前说明 作为码农中的一员,需要不断的学习,我工作之余将一些分析总 ...
- Spring boot中自动编译配置
MAVEN自动编译配置 热部署功能 <dependency> <groupId>org.springframework.boot</groupId> <art ...
- 使用java注解实现toJson方法
如果我有一个对象user,它有几个属性,我想把该对象序列化成一个json字符串,怎么做?我怎么把这种类型的问题实现成一个函数? 注解类似于在被注解的对象上,添加一些简单的属性.在运行时解析这些属性,以 ...
- global的使用
对于一个全局变量,你的函数里如果只使用到了它的值,而没有对其赋值(指a = XXX这种写法)的话,就不需要声明global. 相反,如果你对其赋了值的话,那么你就需要声明global.声明global ...
- 20175311 2018-2019-2 《Java程序设计》第四周学习总结
20175311 2018-2019-2 <Java程序设计>第4周学习总结 教材学习内容总结 这一周在上一周的基础上更进一步,主要学习了子类的继承.super关键字的用法含义.继承与多态 ...
- three.js的组合与合并，raycaster射线无法获取group
1.组合 创建一个组非常简单,在组中添加子元素的效果是,你可以对组进行移动.缩放和变形,而所有的子对象都会受到影响.使用组的时候,你依然可以引用.修改每一个单独的几何体.但是,使用raycaster射 ...
- TableVie优化方法和优化机制
1,UITableview的优化方法(缓存高度,异步绘制,减少层级,hide,避免离屏渲染) (1)缓存高度:当我们创建frame模型的时候,计算出来cell的高度的时候,我们可以将cell的高度缓存 ...
- jmeter向ActiveMQ发送消息_广播/订阅(Topics 队列)
问题描述:测试中需要模拟大量设备的消息上报到平台,但是实际测试中没有那么多设备,所以采取用jmeter直接往ActiveMQ模拟发送设备消息 解决思路:获取平台采取的是Queues还是Topics : ...
- idea启动tomcat 找不到 类,或者报Error configuring application listener of class org.springframework.web.context.ContextLoaderListener
这主要是打成war包的时候没有讲导入的jar也添加进去,只需要添加进来就行啦 可以看到WEB-INF目录下没有lib目录 put into output root 就可以了 然后就可以啦
- Kafka connect in practice(3): distributed mode mysql binlog ->kafka->hive
In the previous post Kafka connect in practice(1): standalone, I have introduced about the basics of ...