在处理表单提交的时候遇到一个问题，通常用<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. MQTT研究之EMQ：【SSL证书链验证】

    1. 创建证书链(shell脚本) 客户端证书链关系: rootCA-->chainca1-->chainca2-->chainca3 ca caCert1 caCert2 caCe ...

  2. Windows10上桌面共享

    Windows自带的桌面共享软件 命令行输入: Msra.exe

  3. HTML5 拖放实例

    <!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>菜鸟教 ...

  4. [转][ActiveMQ]Apache.NMS.ActiveMQ 用法

    下载 C# 组件:http://archive.apache.org/dist/activemq/apache-nms/1.7.0/ 使用说明:https://www.cnblogs.com/cjm1 ...

  5. Windows计划任务实现MYSQL冷备份

    BAT代码 @ECHO OFF for %%i in (%0) do (set "name=%%~ni") title %name% set targetsql="%~d ...

  6. Rhel6.5 相关操作

    Rhel 将光盘挂载动作 操作部分1 挂载光盘 https://jingyan.baidu.com/article/e52e3615a9c19440c60c5121.html ls -l /dev | ...

  7. 通过google cloud API 使用 WaveNet

    Cloud Text-to-Speech 中使用了WaveNet,用于TTS,页面上有Demo.目前是BETA版 使用方法 注册及认证参考:Quickstart: Text-to-Speech 安装g ...

  8. for update 与where current of的问题

    在刚学oracle时一直不明白for update 的作用,今天考试又遇到郁闷半天,所以加以整理. 一: 1>首先for update是对表的行进行锁定.锁定就好比我们学java Thread那 ...

  9. uva_answers

    uva202: https://blog.csdn.net/lecholin/article/details/70163148 uva1589: https://blog.csdn.net/qq_42 ...

  10. python 常用技巧

    一.字符串与数值的转换 Python中字符串转换为数值: str_num = '99' num = int(str_num) 整型数转换为字符串: num = 99 str_num = str(num ...