form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。

Aurora Polaris

于 2023-06-27 14:18:18 发布

阅读量477

点赞数 1

分类专栏： Web 文章标签： html

原文链接：https://www.cnblogs.com/tyson/p/4093914.html

版权

Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。

在处理表单提交的时候遇到一个问题，通常用<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

好文要顶关注我收藏该文

tyson
粉丝 - 1 关注 - 11

+加关注

« 上一篇： getBoundingClientRect获取元素在页面上的位置
 » 下一篇：兼容的获取样式的函数getStyle()

Aurora Polaris

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。

提交</a><a href="javascript:void(0)" id="txtBtn">提交</a><a href="javascript:void(0)" id="txtBtn">提交
复制链接

扫一扫