在处理表单提交的时候遇到一个问题，通常用<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. 使用Visual Studio给SQL生成测试数据

    参考:http://www.cnblogs.com/CareySon/archive/2012/02/20/2359444.html 使用VS2010的数据生成计划来生成测试数据 以下面两个表来做例子 ...

  2. 黄聪：史上最详细的kali安装教程没有之一

    首先在vm里面新建虚拟机,直接选择典型,然后下一步.   1   2 然后到了这一步,选择中间的安装程序光盘镜像文件,然后去文件里面找你自己下载的镜像,这时候可能系统会出现无法检测此光盘镜像中的操作系 ...

  3. ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题

    问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...

  4. 二维码（android）

    我们都知道一般的二微码都是以不同形式显示有的是登入,有的是网页,其实二维码只是一个字符串.到这里我们就有一个疑问那二维码是这样判断是网站或者是登入功能的呢? 其实这些判断部分,二维码生成器早就给你完成 ...

  5. centos7安装rabbitmq3.7.9

    感谢此兄: https://blog.51cto.com/huwei555/2341513?source=dra  (centos7 安装rabbitmq 3.7) 以root用户登录.cd /hom ...

  6. vue 路由参数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. factory di

    services.AddScoped(typeof(Test)); //services.AddScoped<Test>() // .AddScoped<ITest, Test> ...

  8. 2018-2019-2 20175328李欣颖实验二《Java面向对象程序设计》实验报告

    2018-2019-2 20175328李欣颖实验二<Java面向对象程序设计>实验报告 面向对象程序设计-1 用程序解决问题时,要会写三种码: 1.伪代码 此处百分制转五分制: 如果成绩 ...

  9. Vue 学习(1)

    <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta cha ...

  10. mongo 数据查询

    基本查询 方法find():查询 db.集合名称.find({条件文档}) 方法findOne():查询,只返回第一个 db.集合名称.findOne({条件文档}) 方法pretty():将结果格式 ...