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


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

HTML页面设置了Form的onSubmit事件,使用button type="submit" 按钮时,可以正常出发onSubmit方法

如果有一个a标签,点击a标签想要出发form的提交,可以使用 $("#form").submit(),但是submit()方法的调用,不会进入事件onSubmit,原因

 

当点击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,解决办法如下:

JavaScript 全选
function onSubmit(token) {
    var form = document.getElementById("form");

    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();
    }
}

(function ($) {
   
    $(document).ready(function () {

        document.getElementById("form").addEventListener('submit', function (event) {
            
            event.preventDefault();
            event.stopPropagation();
            if (form.checkValidity() === true) {
                $("#errorMsg").html(" ")
                var username = $('#username').val()
                var password = $('#password').val()
                var autoLogin = $('#AutoLogin').prop('checked')

                if (isNULL(username)) {
                    GZDialog.alert('用户名不能为空')
                    return false;
                }
                if (isNULL(password)) {
                    GZDialog.alert('密码不能为空')
                    return false;
                }

                $.ajax({
                    type: 'post',
                    url: $(this).attr("action"),
                    data: {
                        username,
                        password,
                        autoLogin
                    },
                    success: function (data) {
                        window.location.href = $("#url").val()
                    },
                    error: function (res) {
                        $("#errorMsg").html(res.responseJSON.message)
                    }
                });
            }
            else {
                $("#errorMsg").html('请检查数据有效性!')
            }


            form.classList.add('was-validated');
        }, false);

        function isNULL(val) {
            return val == undefined || val == null || val == "" || val.length == 0;
        }
    });


})(jQuery)

 

参考地址:https://www.cnblogs.com/tyson/p/4093914.html

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
管理员
上一篇:C#中URL编码
下一篇:Python对象转json字符串
评论列表

发表评论

评论内容
昵称:
关联文章

formsubmit()方法触发onsubmit事件解决方法兼容版本浏览器
debugger浏览器触发断点
DevExpress表格GridView触发CustomUnboundColumnData事件
winform 关闭form2同时显示form1
RazorEngine使用@Html.Raw引起连锁反应以及解决办法
.NET Core 项目调试时候修改代码
兼容所有浏览器,禁止浏览器自动填充input 密码
版本记录
win10浏览器Cookies文件存放位置
解决VUE发布后因为浏览器缓存造成页面没更新问题
DevExpress 组件 历史版本下载地址【更新:V21.1.5】
浏览器限制最小字体为12号解决办法
Xamarin.Forms 复制本地SQLite数据库
表结构修改>新增主键或者为空
Node.js版本对引起 构建失败提示throw new ERR_INVALID_CALLBACK();
.NET Core ResponseCache 浏览器缓存
当CDN服务可用时,前端有什么解决办法
winform应用退出彻底解决办法
微信浏览器网页调试几中方法
EF强制生成SQL 2008兼容SQL语句

联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码