在处理表单提交的时候遇到一个问题，通常用<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事件的解决方法，兼容各版本浏览器。的更多相关文章

  1. vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方式

     vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方式 #Region "WPF 当浏览器窗体关闭 ...

  2. easyui combobox setValue方法不能触发onSelect事件

    //setValue方法不能触发onSelect事件 //$("#FundingSource").combobox("setValue", data.Fundi ...

  3. jquery on绑定事件叠加解决方法

    jquery on绑定事件叠加解决方法 代码如下 <pre> $('.maoqiu').each(function () { var is_bind = $(this).attr('is_ ...

  4. Jquery方法load之后导致js失效解决方法

    Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...

  5. Jmeter: PATCH方法无法发送参数的暂时解决方法

    Jmeter: PATCH方法无法发送参数的暂时解决方法 最近在做API测试,前面的GET这些HTTP Request方法都无压力,顺利解决. 但碰到PATCH方法时,发现无法通过. 通过对比,发现P ...

  6. [Phonegap+Sencha Touch] 移动开发26 Android下的sencha touch程序，转屏时，Ext.Viewport不能触发orientationchange事件的解决的方法

    Sencha touch 2.4.2 已经解决问题了. 比方你为Ext.Viewport的orientationchange事件加入了一个监听方法: Ext.Viewport.on('orientat ...

  7. 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法

    好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...

  8. onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)

    转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...

  9. echarts 图的点击事件(含：点击重复触发的问题及其解决方法)

    今天用echarts的时候发现一个问题 鼠标指向不同地市触发一个事件展示该地区趋势图  但是但是后台中不管我第几次鼠标指向都会触发两次指向事件 现在贴出解决办法: 问题完美解决.但是为什么会调用两次, ...

随机推荐

  1. maven 项目pom文件引入lib下的jar包

    <dependency> <groupId>abc</groupId> <artifactId>abc</artifactId> <v ...

  2. C# 广告

    新建一个XML页面,设置属性 选择架构,勾选下面的目标,确定即可添加广告 广告模板: <?xml version="1.0" encoding="utf-8&quo ...

  3. 关于Asset Library核心功能的一些计划

    Asset Library是公司计划中的一个网站,用于存放图像,视频,三维文件等资产,在之前的一个多月中我写完了该网站的后台及部分前端,现在就剩最后一部分了,这也是最棘手最核心的部分,就是在网页上快速 ...

  4. 如何去maven仓库下载jar包

    Maven仓库地址 : http://search.maven.org/ https://mvnrepository.com/ 或者你直接百度搜索 : maven仓库 第一个就是 我现在想下载myba ...

  5. JS将图片转为base64

    var getDataFromImg = function(img) { var canvas = document.createElement('canvas'); var context = ca ...

  6. @RequestParam、@ReqeustBody、@ReponseBody认识

    简介: @RequestParam和@RequestBody均是处理request body部分的注解,都用于获取请求部分的参数. @ResponseBody是用于响应部分的注解 1. @Reques ...

  7. php变量函数

    这个东西相当于C语言中的函数指针,C#里的委托   function come() {                   //定义com函数 echo "来了<p>" ...

  8. ring0与ring3通信方式

    修改自: https://blog.csdn.net/wzsy/article/details/54929726 控制码方式详解: https://www.cnblogs.com/lsh123/p/7 ...

  9. logging模块全总结

    Python之日志处理(logging模块)   本节内容 日志相关概念 logging模块简介 使用logging提供的模块级别的函数记录日志 logging模块日志流处理流程 使用logging四 ...

  10. runAllManagedModulesForAllRequests

    https://weblog.west-wind.com/posts/2012/Oct/25/Caveats-with-the-runAllManagedModulesForAllRequests-i ...