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. 有关于服务端模板注入(ssti攻击)——BUUCTF - easy_tornado

    打开题目出现3个链接 /flag.txt 中提示flag in /fllllllllllllag /welcome.txt 中提示 render /hints.txt 中提示 md5(cookie_s ...

  2. [技术博客] 如何避免在代码中多重render

    目录 问题发现 方案1 extracted_method and return(父函数and return法) 方案2 子函数yield,父函数调用后{return} 方案3 extracted_me ...

  3. Linux系统实现虚拟内存有两种方法:交换分区(swap分区)和交换文件

    Linux系统实现虚拟内存有两种方法:交换分区(swap分区)和交换文件 交换文件 查看内存:free -m , -m是显示单位为MB,-g单位GB 创建一个文件:touch /root/swapfi ...

  4. asp.netCore3.0 中使用app.UseMvc() 配置路由

    一.新配置路由策略  在 Asp.Net Core 3.0中默认不再支持app.UserMvc() 方式配置路由 系统. 而是使用新的模式,点击查看asp.netCore3.0区域和路由配置变化 默认 ...

  5. Spring Cloud上下文:应用程序上下文服务

    Spring Boot对于如何使用Spring构建应用程序有一个看法:例如它具有常规配置文件的常规位置,以及用于常见管理和监视任务的端点.Spring Cloud建立在此之上,并添加了一些可能系统中所 ...

  6. django入门7之django template和xadmin常用技巧

    django入门7之django template和xadmin常用技巧 <li {% ' == '/course' %}class="active"{% endif %}& ...

  7. PHP打印日志类

    PHP简单封装个打印日志类,方便查看日志: <?php /** * Created by PhpStorm. * User: zenkilan * Date: 2019/9/26 * Time: ...

  8. js数组、对象处理

    js arry: var arry = []; js object: var obj = {}; obj定义属性: obj.filename=''; obj.id=''; 把 obj 添加到 arry ...

  9. Qt组件(例如按钮、树形控件)上响应鼠标右键

    ui->textEdit->setContextMenuPolicy(Qt::CustomContextMenu); connect(ui->textEdit,SIGNAL(cust ...

  10. Html JavaScript网页制作与开发完全学习手册

    Html JavaScript网页制作与开发完全学习手册 篇 HTML技术章 HTML入门 1.1 什么是HTML 1.1.1 HTML的特点 1.1.2 HTML的历史 1.2 HTML文件的基本结 ...