最近遇到一次处理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. CentOS(Linux)中解决MySQL乱码

    环境:CentOS 6.3.mysql5.1 Centos 6.3在上安装mysql client和server之后,出现乱码,不得不修改编码. 注意: 关于utf8和gbk的区别详细见:linux中 ...

  2. Linux中OCI开发库的配置

    Oracle调用接口(Oracle Call Interface,简称OCI)提供了一组可对Oracle数据库进行存取的接口子例程(函数),通过在第三代程序设计语言(如C语言)中进行调用可达到存取Or ...

  3. SIFT+BOW 实现图像检索

    原文地址:https://blog.csdn.net/silence2015/article/details/77374910 本文概述 图像检索是图像研究领域中一个重要的话题,广泛应用于医学,电子商 ...

  4. <TCP/IP>Internet地址结构回顾

    本章介绍了Internet中使用的网络层地址,又称IP地址. 要想在网上冲浪,一个设备至少要有一个IP地址(PS:我用赛风FQ的时候,居然自动更换了IP地址,顿时感觉很神奇但是不知道为什么) ***成 ...

  5. Date——时间戳转化为YYYY-MM-DD h:m:s时间格式

    /** * example new Date(times) * @param time Date * @param fmt "yyyy-MM-dd" /"yyyy-MM- ...

  6. 026_nginx引用lua遇到的坑

    server { listen 80; listen 443 ssl; server_name www.jyall.com; access_log /data/log/nginx/*.www.jyal ...

  7. Git系列②之部署企业级开源仓库gitlab服务器

    Git系列②之部署企业级开源仓库gitlab服务器 上一篇我们介绍了github的常见使用方法,下面开始部署本地开源仓库gitlab GitLab 是一个用于仓库管理系统的开源项目. 1.安装配置gi ...

  8. 从MySQL中导入数据到MongoDB中

    从sql中导出需要的数据为csv格式的数据 select field1,field2,...,fieldn from TABLE into outfile '/test.csv' fields ter ...

  9. Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念

    Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念 进入到了Linux学习之CentOS第三篇了,这篇文章主要记录下对linux文件系统的初步认识,以及用户组.用户权限.文 ...

  10. Flask允许跨域

    什么是跨域 在 HTML 中,<a>, <form>, <img>, <script>, <iframe>, <link> 等标 ...