在处理表单提交的时候遇到一个问题，通常用<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. Spring众多jar包的特点,及Spring jar包官网下载方法

    下面给大家说说spring众多jar包的特点吧,无论对于初学spring的新手,还是spring高手,这篇文章都会给大家带来知识上的收获,如果你已经十分熟悉本文内容就当做一次温故知新吧.spring. ...

  2. 如何清除Windows10中的恢复分区

    在Windows搜索框中键入Cmd.出现结果列表. 右键单击命令提示符并选择以管理员身份运行. 在命令提示符下键入diskpart,然后按Enter键. 输入list disk并按Enter键. 出现 ...

  3. react super() and super(props)

    subclass: subclass is a class that extends another class. 即子类. In ES2015, to use 'this' in subclasse ...

  4. python中的文件处理

    一 文件操作 (----------------------------------------------------------------------) 一 介绍 计算机系统分为:计算机硬件,操 ...

  5. 前端-JavaScript1-7——JavaScript之数学运算符

    ---恢复内容开始--- 运算符叫做operator,也可以叫做操作符.运算符有很多种,一元运算符.二元运算符:数学运算符.逻辑运算符……我们今天先学习数学运算符,比较简单 +     加法 -    ...

  6. 打印上三角或下三角矩阵（9x9） - perl, R

    欲打印矩阵位置示意图 #!/usr/bin/perl -w use strict; ## bottom left ..) { ..) { if($col <= $row) { print $ro ...

  7. 刘志梅2017710101152.《面向对象程序设计（java）》第十一周学习总结

    实验十一   集合 实验时间 2018-11-8 1.实验目的与要求 (1) Java最初版本只为最常用的数据结构提供了很少的一组类:Vector.Stack.Hashtable.BitSet与Enu ...

  8. solr参数之facet

    facet就像sql语句中的group一样,是对某一个字段进行group并count,即能够按照Facet的字段进行分组并统计. 一.基本使用: 必须属性:facet=true&facet.f ...

  9. Python全栈开发记录_第七篇（模块_time_datetime_random_os_sys_hashlib_logging_configparser_re）

    这一篇主要是学习python里面的模块,篇幅可能会比较长 模块的概念:在Python中,一个.py文件就称之为一个模块(Module). 模块一共三种: python标准库 第三方模块 应用程序自定义 ...

  10. 未能加载文件或程序集“Microsoft.Vbe.Interop, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c”或它的某一个依赖项。系统找不到制定的文件。

    未能加载文件或程序集"Microsoft.Vbe.Interop, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e ...