最近遇到一次处理form数据的过滤,采用了button的onclick事件来检查,发现return false后表单仍然提交了。

于是仔细研究了下onclick、onsubmit、submit集合函数之间的关系和区别

onsubmit:
You can override this event by returning false in the event handler.
Use this capability to validate data on the client side to prevent invalid data from being submitted to the server.
If the event handler is called by the onsubmit attribute of the form object,
the code must explicitly request the return value using the return function,
and the event handler must provide an explicit return value for each possible code path in the event handler function.
The submit method does not invoke the onsubmit event handler. submit:
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.

首先生成一个form

<form action="#" method="POST" name="A" onsubmit="return X();">
<input type="text" value="" />
<input onclick="Y()" type="submit" value="提交" />
</form>

自己写X()、Y()函数,我们会发现,这几个函数的执行顺序

1) onclick: Y();

2) onsubmit: X();

3) submit();

也就是说

只要 onclick 未 return false 那么就继续执行 onsubmit

只要 onsubmit 未return false 那么表单就被提交出去了

另外一点写法上注意一定要 “return X();” 才能取得函数的返回值,否则只是调用函数,返回值未被传递

正确写法:
<input type=submit onclick=”return X();”>
//X() 返回false后,form的submit会被终止

错误写法:
<input type=submit onclick=”X()”>
//X() 返回false后未传递给onclick事件,form的submit会继续

FORM表单中onclick()、submit()与onsubmit()的问题的更多相关文章

  1. form表单中的submit点击时阻止提交

    在form 中增加onsubmit="return false;"属性.

  2. FORM表单 onclick()与onsubmit()

    FORM表单中onclick().submit()与onsubmit()的问题 最近遇到一次处理form数据的过滤,采用了button的onclick事件来检查,发现return false后表单仍然 ...

  3. jsp中的form表单中的 id和name有什么区别了

    <form action="./system/WebServer_webServerLogin" method="post" id="login ...

  4. form表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)

    form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...

  5. Form表单中的action路径问题,form表单action路径《jsp--->Servlet路劲问题》这个和上一个《jsp--->Servlet》文章有关

    Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com  网友分享于:  2014-08-14 08:08:01     浏览数44525次 ...

  6. Form表单中method为get和post的区别

    序,form表单中的方法分为get和post,但你都知道他们之间的区别吗? Form表单中method为get和post的区别: 例子如下,有个Form表单. <form action=&quo ...

  7. Form表单中的action路径问题

    今天刚接触web,在用jsp和servlet做一个简单的登陆的时候在Form表单action属性和method属性的一些问题:  我遇到的是Form表单提交到servelet处理时遇到的问题:  (1 ...

  8. form表单中的input有哪些类型

    form表单中的input有哪些类型 1.button <input type="button"/> 2.checkbox <input type="c ...

  9. form表单中button按钮返回上一页解决办法

    解决Form中button按钮不好用的问题解决办法. 方法一: 1.在Form表单标签中国增加一个属性,如下图,红框处 2.返回按钮样式 3.onclick方法需要跳转的页面,遮挡处为需要返回的页面 ...

随机推荐

  1. 【转】浅析SkipList跳跃表原理及代码实现

    SkipList在Leveldb以及lucence中都广为使用,是比较高效的数据结构.由于它的代码以及原理实现的简单性,更为人们所接受.首先看看SkipList的定义,为什么叫跳跃表? "S ...

  2. MySQL--(了解)可能会用到的内置函数

    mysql内置函数列表可以从mysql官方文档查询,这里仅分类简单介绍一些可能会用到的函数.1 数学函数abs(x)pi()mod(x,y)sqrt(x)ceil(x)或者ceiling(x)rand ...

  3. MySQL的数据文件存储

    MySQL的数据文件存储 MyISAM引擎分为:静态.动态和压缩MyISAM三种: 静态MyISAM:如果数据表中的各数据列的长度都是预先固定好的,服务器将自动选择这种表类型.因为数据表中每一条记录所 ...

  4. php7静态方法的链式调用

    2018-1-11 20:25:48 星期四 情景: 以前想要链式调用必须先 new 一个对象, 然后 $obj->aa()->bb()... 现在PHP7 (php7.0.13  php ...

  5. appium常用方法

    1.输入中文 在capabilities中增加两项设置: capabilities.setCapability("unicodeKeyboard", "True" ...

  6. wireshark找(检测)不到(捕获)网卡的解决办法

    1 前言 有时候打开wireshark,会提示找不到可用网卡,此时是因为NetGroup Packet Filter Driver 服务没有开启. 环境:笔记本 系统:Win10 网络:WIFI 2  ...

  7. JS访问SpringMVC后台

    var actions=ctx.path + "/api/stat/exportScheStatInfo.json"; var form = $("<form> ...

  8. PYTHON- 操作系统和python程序

    操作系统基础 应用程序的启动:(重点!!!) python解释器安装,多版本共存 执行python程序的两种方式 运行一个python程序经历的三个阶段(重要) python 的内存管理 ====== ...

  9. python-面向对象(绑定方法与非绑定方法)

    一.绑定方法: 绑定给谁就应该由谁来调用,谁来调用就会将谁当做第一个参数传入 1.绑定给对象的方法:类中定义的函数默认就是绑定给对象的,自动将对象当作第一个参数传入,类也可以调用,但是不会自动传值 2 ...

  10. MySQL笔记二

    Ø function 函数 函数的作用比较大,一般多用在select查询语句和where条件语句之后.按照函数返回的结果, 可以分为:多行函数和单行函数:所谓的单行函数就是将每条数据进行独立的计算,然 ...