FORM表单中onclick()、submit()与onsubmit()的问题

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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

1
2
3
4
<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()与onsubmit()的更多相关文章

  1. JS中 submit提交与Form表单里的onsubmit的调用问题?

    最近在开发中遇到了表单提交前验证的问题,用一个普通的button按钮代替submit按钮,在提交前触发这个button的onclick事件,在其事件中触发form的submit事件.问题出现了: &l ...

  2. form 表单onclick事件 禁止表单form提交

    最近遇到一次处理form数据的过滤,采用了button的onclick事件来检查,发现return false后表单仍然提交了. 于是仔细研究了下onclick.onsubmit.submit集合函数 ...

  3. Jquery实现form表单提交后局部刷新页面的多种方法

    最近做一个小项目,刚好需要用到搜索功能,实现搜索框内输入数据然后按回车或者点击“提交”,然后给后台数据库处理并返回数据给前端,在前端局部更新数据. 但是遇到了一个小问题,就是form表单下任意输入框输 ...

  4. 提交Form表单,submit之前做js判断处理

    效果: 在点击提交按钮时,首先进行js判断, 如果不符合条件,则alert出提示信息,并return false. 主要点就在于给form表单添加一个onsubmit事件. 在onsubmit事件中定 ...

  5. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  6. form表单的字符串进行utf-8编码

    <form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explore ...

  7. react引用antd的form表单

    引用form是第三方插件ant插件,官网网址:https://ant.design/.用到的antd的版本是@2.0.1.form(https://ant.design/components/form ...

  8. Html:form表单

    1:onsubmit 事件:会在表单中的确认按钮被点击时发生. <form action="" method="post" name="form ...

  9. Form表单的操作

    form对象 <form name=“form1” action=“login.php” method=“post”></form> form对象的属性 name:表单名称 m ...

随机推荐

  1. 论文阅读 | Recurrent Attentional Reinforcement Learning for Multi-label Image Recognition

    源地址 arXiv:1712.07465: Recurrent Attentional Reinforcement Learning for Multi-label Image Recognition ...

  2. 深度排序模型概述(一)Wide&Deep/xDeepFM

    本文记录几个在广告和推荐里面rank阶段常用的模型.广告领域机器学习问题的输入其实很大程度了影响了模型的选择,因为输入一般维度非常高,稀疏,同时包含连续性特征和离散型特征.模型即使到现在DeepFM类 ...

  3. 修改 ulimit 时 需要注意的问题

  4. python 获取天气信息,并绘制曲线

    import urllib.request import gzip import json print('------天气查询------') def get_weather_data() : cit ...

  5. S905系列的uboot分析

    Ubuntu18.04通过PL2303HX连接TTL 接线的连接 PL2303的3.3V悬空, TX接盒子RX, RX接盒子TX, GND接盒子GND 终端选择 系统自带pl2303的驱动, 可以通过 ...

  6. JAXB xml序列化应注意

    使用JAXB将对象序列化为XML时,发现有一个地方性能非常低,即 JAXBContext.newInstance(XXX.class); 建议将其提前创建好并作为变量保存,到时可直接使用其引用,而非重 ...

  7. GitLab的权限管理及Merge Request

    GitLab的权限管理及Merge Request 原创尘世间一名迷途小码农 发布于2019-06-09 12:40:30 阅读数 2909  收藏 展开 目录 1.前言 2.角色权限 3.强制代码审 ...

  8. 微信小程序 input 的 type属性 text、number、idcard、digit 区别

    微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...

  9. 2019年MTP管理技能提升培训笔记

    2019年MTP管理技能提升培训笔记 管理专题培训–MTP管理技能提升培训 高水准的问题分析解决 何为高水准 高 多层探寻,高度分析,即需要有深度 水 团队讨论,水平思考,即需要有广度 准 预防应变, ...

  10. g-api notes

    目录 Q: What is GOrigin? What the meaning of parameters GMat(const GNode &n, std::size_t out) Q: h ...