最近遇到一次处理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. 《超越C++标准库:Boost库导引》:序

    序(Foreword) C++社区正在发生着一些美妙的事情.尽管C++仍然是世界上使用最广泛的编程语言,它依旧在变得更加强大而且易用.不信么?容我慢慢道来. 当前版本的标准C++是在1998年最终确定 ...

  2. 【转】Java HashMap的死循环

    问题的症状 从前我们的Java代码因为一些原因使用了HashMap这个东西,但是当时的程序是单线程的,一切都没有问题.后来,我们的程序性能有问题,所以需要变成多线程的,于是,变成多线程后到了线上,发现 ...

  3. 判断鼠标进入容器的方向小Demo

    参考资料: 贤心博客:http://sentsin.com/web/112.html, Math.atan2(y,x) 解释 :http://www.w3school.com.cn/jsref/jsr ...

  4. c中perror函数

    写代码这么久,竟然很少用到perror函数,忘记了其强大的功能. 所在头文件: #include<stdio.h> 函数定义: void perror(const char *str); ...

  5. 利用表格分页显示数据的js组件datatable的使用

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

  6. Linux系统的命令别名功能(转)

    在管理和维护Linux系统的过程中,将会使用到大量命令,有一些很长的命令或用法经常被用到,重复而频繁地输入某个很长命令或用法是不可取的.这时可以使用命令别名功能将这个过程简单化. 1.系统定义的别名通 ...

  7. 基于注解的Dubbo服务配置

      基于注解的Dubbo服务配置可以大大减少dubbo xml配置文件中的Service配置量,主要步骤如下:   一.服务提供方   1. Dubbo配置文件中增加Dubbo注解扫描 <!-- ...

  8. 搭建activemq服务

    文章链接:https://www.cnblogs.com/xiaxinggege/p/5900319.html ubuntu下安装JDK并搭建activeMQ   1.安装JDK,网上有人说activ ...

  9. 文本内容查找grep、文件查找find、正则匹配

    一.文本内容查找工具 grep grep   egrep (文本过滤)   fgrep (不支持正则) 对文本的内容按照指定的匹配模式基于行来进行筛选 格式     grep [选项] 模式 文件 选 ...

  10. Windws Server 2008 R2 WEB环境配置之IIS7/IIS7.5+FastCGI+PHP 5.6.4+MYSQL+phpMyAdmin

    本篇为WEB环境配置的汇总篇,其中PHP以FASTCGI方式来运行,这种方式性能更高.经过配置后,我们的服务器将同时可以运行PHP和.NET的程序,属称全能服务器.所有配置可以根据自身实际需要进行增减 ...