FORM表单中onclick()、submit()与onsubmit()的问题
最近遇到一次处理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()的问题的更多相关文章
- form表单中的submit点击时阻止提交
在form 中增加onsubmit="return false;"属性.
- FORM表单 onclick()与onsubmit()
FORM表单中onclick().submit()与onsubmit()的问题 最近遇到一次处理form数据的过滤,采用了button的onclick事件来检查,发现return false后表单仍然 ...
- jsp中的form表单中的 id和name有什么区别了
<form action="./system/WebServer_webServerLogin" method="post" id="login ...
- form表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)
form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...
- Form表单中的action路径问题,form表单action路径《jsp--->Servlet路劲问题》这个和上一个《jsp--->Servlet》文章有关
Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com 网友分享于: 2014-08-14 08:08:01 浏览数44525次 ...
- Form表单中method为get和post的区别
序,form表单中的方法分为get和post,但你都知道他们之间的区别吗? Form表单中method为get和post的区别: 例子如下,有个Form表单. <form action=&quo ...
- Form表单中的action路径问题
今天刚接触web,在用jsp和servlet做一个简单的登陆的时候在Form表单action属性和method属性的一些问题: 我遇到的是Form表单提交到servelet处理时遇到的问题: (1 ...
- form表单中的input有哪些类型
form表单中的input有哪些类型 1.button <input type="button"/> 2.checkbox <input type="c ...
- form表单中button按钮返回上一页解决办法
解决Form中button按钮不好用的问题解决办法. 方法一: 1.在Form表单标签中国增加一个属性,如下图,红框处 2.返回按钮样式 3.onclick方法需要跳转的页面,遮挡处为需要返回的页面 ...
随机推荐
- hibernate框架学习之二级缓存(测试用例)
HqlDemoApp.java package cn.itcast.h3.query.hql; import java.io.Serializable; import org.hibernate.Qu ...
- iperf 2.05版本升级到2.0.9
将openwrt trunk 分支上iperf 2.0.9移植到 bb版本上时,编译遇到如下问题: make[6]: Entering directory '/home/hbg/bb/build_d ...
- 解决mysql 主从数据库同步不一致的方法
接着上文 配置完Mysql 主从之后,在使用中可能会出现主从同步失败的情况. mysql> show slave status\G Slave_IO_Running: Yes Slave_SQL ...
- Golang 优化之路-空结构[转]
写在前面 开发 hashset 常用的套路: map[int]int8 map[int]bool 我们一般只用 map 的键来保存数据,值是没有用的.所以来缓存集合数据会造成内存浪费. 空对象 空对象 ...
- how to get address of member function
see:http://www.cplusplus.com/forum/general/136410/ & http://stackoverflow.com/questions/8121320/ ...
- 接口签名进行key排序,并MD5加密
import org.apache.commons.codec.digest.DigestUtils; import java.io.UnsupportedEncodingException; imp ...
- Django 自定义模型管理器类2个应用场景
class BookManager(models.Manager): # 改变查询集的结果集 def all(self): books = super().all() # QuerySet books ...
- JS将图片转换成Base64码
直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- vue v-time指令封装(接口返回时间戳 在到日期转换)
// 全局时间戳转换指令注册Vue.directive('time',{ bind: function (el,binding) { let getTime = new Date(binding.va ...
- Confluence 6 跟踪你安装中的自定义修改
在 Confluence 中的系统信息(System Information)部分,有一个 修改(Modification)的选项.在这个选项中列出了自你 Confluence 安装以来,你 Conf ...