最近遇到一次处理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. Centos6.8下卸载软件(以Mysql为例)

    1 删除Mysql yum remove  mysql mysql-server mysql-libs mysql-server; find / -name mysql 将找到的相关东西delete掉 ...

  2. FFmpeg Scaler Options

    算法 帧率 图像主观感受 SWS_FAST_BILINEAR 228 图像无明显失真,感觉效果很不错. SWS_BILINEAR 95 感觉也很不错,比上一个算法边缘平滑一些. SWS_BICUBIC ...

  3. MySQL--视图view、触发器trigger、事务(start transaction)、存储过程(特殊的数据逻辑处理函数)、流程控制(if,case....)

    mysql致力于项目开发及数据库管理之间解耦合(帮忙封装一些数据处理方法,使应用程序的开发者可以专注于应用程序的开发),但受限于不同部门沟通的成本问题,现阶段直接使用的价值不大. 一.视图(只能sel ...

  4. Light OJ 1020

    简单推理题: #include<bits/stdc++.h> using namespace std; int main() { int T, n; string Name; cin &g ...

  5. Vue -- 数据监听

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 实体类和json互相转换

    /// <summary> /// 将实体类转换为json数据 /// </summary> /// <returns></returns> publi ...

  7. Jquery分享插件

    效果图如下: 代码如下: <!DOCTYPE HTML> <html style="padding-bottom: 54px;"> <head> ...

  8. js——正则表达式

    1. 创建一个正则表达式 var patt=new RegExp(pattern,modifiers);var patt=/pattern/modifiers; var index = str.sea ...

  9. PID控制器开发笔记之十一:专家PID控制器的实现

    前面我们讨论了经典的数字PID控制算法及其常见的改进与补偿算法,基本已经覆盖了无模型和简单模型PID控制经典算法的大部.再接下来的我们将讨论智能PID控制,智能PID控制不同于常规意义下的智能控制,是 ...

  10. mongoDB基础使用

    环境交代 操作系统: CentOS 6.8 64位 mongodb: 4.06 安装 官方下载地址:https://www.mongodb.org/dl/linux/x86_64-rhel62 阿里云 ...