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

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 倒是正常的,所以这个特例需要注意下,如果有人发现原因了,感谢告知呀 !

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

  1. asp.net form submit 在Chrome里面看Form提交

    Chrome中查看 request  form data 在Fiddler中查看

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

    在处理表单提交的时候遇到一个问题,通常用<input type="submit" value="提交" />按钮来提交form,再监听form的on ...

  3. form submit 的callback方法

    参考:http://hayageek.com/jquery-ajax-form-submit/ form的submit方法返回数据处理. 普通的form: $("#ajaxform" ...

  4. 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问

    利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...

  5. javascript form提交 不执行onsubmit事件解决方案

    转载自:https://www.cnblogs.com/lorgine/archive/2011/03/30/2000284.html 今天做项目过程中,需要用到javascript提交form到后台 ...

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

    方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...

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

    实现同时提交多个form(基础方法) 收集 分类: 1.2-JSP 1.3-J2EE 1.1J2se 1.0-Java相关2011-12-01 20:59 1644人阅读 评论(0) 收藏 举报 bu ...

  8. <input type = "submit"> 提交方式和用js的form.submit()有什么区别?

    假设: A表单内有<input type="submit">,通过点击这个input来提交表单 B表单内没有<input type="submit&qu ...

  9. django form POST方法提交表达

    之前就着手开始尝试用django来简化web开发的流程周期,果不其然,速度还行,当然前期的产品那就相当粗糙了.举例来说,就连最基本的登录都是抄别人的,最可怕的是用GET方法提交表单,今天就尝试解决这个 ...

随机推荐

  1. js 复制内容到粘贴板的兼容性

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...

  2. Oracle 性能调优案例(代码级别)

    业务案例一: 业务:千万记录表中查询出50条符合条件的记录. 现象:oracle部署时跨机器,业务取得数据耗时10ms.造成业务性能不达标. 为了突出主题,对于异常分支,均已省略. 对于通常写法, o ...

  3. CSS/JQuery元素选择器之&amp;&amp;和||,选择器的逻辑操作

    使用CSS或JQuery选中元素的时候.非常多时候我们须要对条件进行&&或者||操作. JQuery或者CSS中的||操作是非经常常使用的.也非常easy,就是通过逗号来分隔的. se ...

  4. chrome 浏览器设置字体大小,方便调试

    H5开发的时候,有时候明明字体没有那么大,但在chrome中看上去依然很大.就像型号不对一样,但在手机端是正常的. 这是因为chrome浏览器设置了默认字体.只需要设置一下即可.  「chrome:/ ...

  5. MySQL监控脚本

    zabbix监控mysql时自定key用到的脚本 #!/usr/bin/env python #-*- coding: UTF-8 -*- from __future__ import print_f ...

  6. TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter实现Tab标签

    首先来看下实现的效果吧: 最近在项目中实现这个效果的时候.尽管自己磕磕绊绊的实现了,可是知识确实模模糊糊的,今天天气异常的冷,在加上这个知识不太熟练,实在是没有心情进行接下来的计划,干脆借着这个时间, ...

  7. Impala中多列转为一行

    之前有一位朋友咨询我,Impala中怎样实现将多列转为一行,事实上Impala中自带函数能够实现,不用自己定义函数. 以下我開始演示: -bash-4.1$ impala-shell Starting ...

  8. Bash中的括号(一)

    初学Bash脚本编程,里面的各种括号,绝对是一个大坑,为了救人救己,以防再度入坑,特记录如下: 一.单小括号: 1.创建子Shell.单个小括号用来创建一个子shell,子shell允许你在不影响当前 ...

  9. atitit.系统架构图 的设计 与工具 attilax总结

    atitit.系统架构图 的设计 与工具 attilax总结 1. 架构图的4个版式(标准,(左右)悬挂1 2. 架构图的层次结构(下属,同事,助手)1 3. wps ppt1 4. 使用EDraw画 ...

  10. 608. Two Sum - Input array is sorted【medium】

    Given an array of integers that is already sorted in ascending order, find two numbers such that the ...