form.submit 方法 并不会触发 form.onsubmit 事件

做表单的时候发现一个奇怪的地方,总结下:

form.submit 方法 并不会触发 form.onsubmit 事件,看代码:

<body>
    <div class="container">
        <form action="http://route.showapi.com/213-1" method="POST">
            <input type="text" value="ssss">
            <button type="submit">提交</button>
        </form>
    </div>
    <script>
        var form=document.forms[0];
        var btn=form.getElementsByTagName(‘button‘)[0];
        form.onsubmit=function(event){
            var e = event||window.event;
            alert(e);
        };
        form.submit();
    </script>
</body>

如题,一打开网页,并没有 alert() ,而是直接提交表单了,也就是说,form.submit 方法 并不会触发 form.onsubmit 事件 ,FF 和 chrome 测试都一样,解决办法:

把 form.submit();
改成提交按钮的 click 事件,上题就是把最后一句代码改成:

btn.click();

可能有的人不想这么做,会想把 form.submit() 改成 form.onsubmit() ,但是这个逻辑就错了,不信你试试???

解析:fomr.submit() 是在调用 form 的 submit 方法(默认的方法),而 form.onsubmit() 是在调用 form 的 onsubmit 方法(你在前面指定的),这个时候就获取不到 event 对象了,获取的 undefined

但是如果不是 submit 事件,换成 click 倒是正常的,所以这个特例需要注意下,如果有人发现原因了,感谢告知呀 !

时间: 2024-10-15 12:52:27

form.submit 方法 并不会触发 form.onsubmit 事件的相关文章

慎用jQuery中的submit()方法

今天在做项目的过程中用到了submit()提交表单. 折腾许久很是郁闷,经过多方资料查询和亲测后,得出结论: 一定要慎用submit()方法 首先,在form表单中一定不要将input中的name或id命名为submit,否则会导致在submit()的失效,例如以下脚本在所有浏览器(IE/FF/CHROME/SAFARI)中都会失效: <!DOCTYPE html> <html> <head> <script src="//cdn.bootcss.com

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

在处理表单提交的时候遇到一个问题,通常用<input type="submit" value="提交" />按钮来提交form,再监听form的onsubmit事件就能在前端处理表单验证的事情. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<

form submit 的callback方法

参考:http://hayageek.com/jquery-ajax-form-submit/ form的submit方法返回数据处理,支持文件提交. 这里用到html5的FormData.不支持html5的浏览器用不了.通过jquery的ajax方法提交. 1 $("#post_form").submit(function(e) 2 { 3 var formObj = $(this); 4 var formURL = formObj.attr("action");

jQuery的ajax的form提交方法应用

1.如果不用ajax的form提交,就必须把表单的每一条数据进行获取,并提交给action进行处理.这样做比较麻烦,现在用了jQuery的easyui,使用封装好的ajax的form提交.脚本代码如下: //提交表单 function sysusersave(){ if($.formValidator.pageIsValid()){//校验表单输入信息是否合法 //使用jquery的ajax from提交,指定from的id和回调方法,提交的url使用提from中的action,参数为空,传递J

实现同时提交多个form(基础方法) 收集(转)

方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=g

form表单的应用:form对象自带属性和方法及提交时提交的数据.....

1.html中含有form表单 (1)html <form id="picLoad" class="lt" style="width: 230px;" enctype="multipart/form-data"> <label> <div class="upload">上传图片</div> <input id="doc-form-file&qu

js提交表单错误:document.form.submit() is not a function

今天在写JS时,遇上这么个错误:"document.form.submit() is not a function",经过一番搜索,最终找到了修复方法. 这个错误一般是由于表单<form>-</form>中含有name="submit"时,提交时就会有冲突,这个错误常见于按钮上,如: 在Javascript做submit()的时候就会出现冲突,这时将name="submit"改成别的名字就可以了:即使不是按钮,在表单的输入

Prevent form submit before pass the validation with React-Rails

I've been working on Rails app refactoring by react-rails recently. We want to use React components but keep the advantages of Rails at the same time. So typically Rails will handle the CRUD and the route. Now I'm facing a problem which is how to use

easyui form submit 不提交

http://bbs.csdn.net/topics/390811964 function saveProduct() {             //$('#fm').form('submit', {             //    url: url,             //    onSubmit: function () {             //        return $(this).form('validate');             //    },