在处理表单提交的时候遇到一个问题，通常用<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. 剑指offer 7. 递归和循环 斐波那契数列

    题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 简简单单 废话不多说,直接上代码: public class Sol ...

  2. volatile和不加volatile的区别

    http://blog.chinaunix.net/uid-25100840-id-3067899.html 对于一个地址,如果加上了volatile参数,这个地址也就不会经过编译器优化,也就是说这个 ...

  3. oracle 删除用户

    -- 查询用户各进程相对应的 sid.serial#. -- 注意: username 必须大写 SELECT sid,serial#,username FROM v$session WHERE us ...

  4. 招聘IT图书兼职作者（长期兼职）

    招聘图书兼职作者(长期兼职),本公司有十多年的计算机图书出版经验,每年出版上百本编程类图书, 和清华大学出版社 电子工业出版社 机械工业出版社都有很好的合作.你可以不用按时上线,不用天天被boss盯着 ...

  5. C# 6.0：新的Dictionary Initializer

    初始化Dictionary不是什么新东西,你可以简单的通过Collection Initializer来初始化一个Dictionary,这是从C#3.0就有的特性.Collection Initial ...

  6. [转]Linux 基本操作（RM 删除）

    来自:http://billie66.github.io/TLCL/book/chap05.html Be Careful With rm! 小心 rm! Unix-like operating sy ...

  7. PTA币值转化

    include<stdio.h> include<math.h> int n,s=0; int main(void){ int i,j,k,p=1,flag=1; int f( ...

  8. Linux基础之常用命令整理（二）

    Linux系统启动流程 bios(找到启动介质) --> mbr(找到boot loader  512B 446引导信息 64分区信息 2 标志位 ) -->grub(选择操作系统或者内核 ...

  9. 学习MeteoInfo二次开发教程（十）

    1.复制文件cloud_1009271330.000,I-01.pal 2.改: GridData cloud = aDataInfo.GetGridData(""); 为: Gr ...

  10. kafka connect rest api

    1. 获取 Connect Worker 信息curl -s http://127.0.0.1:8083/ | jq lenmom@M1701:~/workspace/software/kafka_2 ...