form表单提交onclick和onsubmit
onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。
在提交表单前,一般都会进行数据验证,可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。
但是onclick比onsubmit更早的被触发。
提交过程
1、用户点击按钮 ---->
2、触发onclick事件 ---->
3、onclick返回true或未处理onclick ---->
4、触发onsubmit事件 ---->
5、onsubmit未处理或返回true ------>
6、提交表单.
onsubmit处理函数返回false,onclick函数返回false,都不会引起表单提交。
第一种:onsubmit
<script language="javascript">
function CheckPost ()
{
if (addForm.user.value == "")
{
alert("请填写用户名!");
addForm.username.focus();
return false;
}
if (addForm.title.value.length < 5)
{
alert("标题不能少于5个字符!");
addForm.title.focus();
return false;
}
return true;
}
</script> <form action="test.php" method="post" name="addForm" onsubmit="return CheckPost();">
<div>用户:<input type="text" size="10" name="user" maxlength="20"/></div>
<div>标题:<input type="text" name="title" maxlength="50"/></div>
<div>内容:<textarea name="content" rows="8" cols="30"></textarea></div>
<div>
<input type="submit" name="submit" value="发表留言"/>
</div>
</form>
第二种:onclick
1 <script language="javascript">
2 function SendForm ()
3 {
4 if(CheckPost())
5 {
6 document.addForm.submit();
7 }
8 }
9
10 function CheckPost ()
11 {
12 if (addForm.user.value == "")
13 {
14 alert("请填写用户名!");
15 addForm.username.focus();
16 return false;
17 }
18 if (addForm.title.value.length < 5)
19 {
20 alert("标题不能少于5个字符!");
21 addForm.title.focus();
22 return false;
23 }
24 return true;
25 }
26 </script>
27
28 <form action="test.php" method="post" name="addForm">
29 <div>用户:<input type="text" size="10" name="user" maxlength="20"/></div>
30 <div>标题:<input type="text" name="title" maxlength="50"/></div>
31 <div>内容:<textarea name="content" rows="8" cols="30"></textarea></div>
32 <div><input type="button" name="submit" value="发表留言" onclick="SendForm();"/></div>
33 </form>
form表单提交onclick和onsubmit的更多相关文章
- 2017-01-11小程序form表单提交
小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...
- Form表单提交,Ajax请求,$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
- javascprit form表单提交前验证以及ajax返回json
1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...
- form表单提交方式
form表单提交方式总结一下: 一.利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交 ...
- Form表单提交,js验证
Form表单提交,js验证 1, Onclick() 2, Onsubmit() Button标签 input (属性 submit button )标签 Input type=button ...
- Form表单提交数据的几种方式
一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- python中前后端通信方法Ajax和ORM映射(form表单提交)
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...
- jquery模拟form表单提交并新打开页面
/** * form表单提交本页面打开 * @param url * @param params */ function postCurrent(url,params){ var form = $(& ...
随机推荐
- [转载] 虚拟机下面安装windows+oracle ASM的过程
转帖:https://www.2cto.com/database/201303/195261.html 最开始的时候 我找了一个挺好的教程 安装过 但是已经找不到了,先转载一下这个内容,后续再测试完善 ...
- PostgreSQL之Sequence序列(转)
本文转载自:https://blog.csdn.net/omelon1/article/details/78798961 Sequence序列 Sequence是一种自动增加的数字序列,一般作为行或者 ...
- link & auto cards
link & auto cards a link to card link https://docs.embed.ly/docs/cards DD WX <blockquote clas ...
- loadrunner基础学习笔记七-面向目标场景
部署应用程序之前,要执行验收测试以确保系统能够承担预期的实际工作量. 可以为想要生成的每秒点击次数,每秒事务数或事务响应时间设置目标 loadrunner将使用面向目标的场景自动生成所需的目标,当应用 ...
- jquery遍歷
遍歷是什麼? jquery的遍歷指的是移動,就是從選中的元素根據元素之間的關係移動,直到找到目標元素.從DOM樹中,可以進行向上移動(祖先),向下移動(子孫)和水平移動(同胞). 祖先就是父,祖父,曾 ...
- javascript 中的后退和前进到上下一页
jsp页面中要返回到上一页可以使用的方法有: 一不刷新: window.history.back(); //返回上一页,这里是利用的浏览器的缓存,返回后数据不会刷新;下一页就用:window.his ...
- AWS、Azure和Google的云容器注册表有什么区别?
亚马逊云计算服务(AWS).谷歌云服务和微软Azure,这三大公共云平台都提供Docker容器注册表.虽然他们的产品看起来很相似,但开发人员在做出选择之前,应该先了解价格和功能方面的差异. 公共云供应 ...
- BZOJ4828 AHOI/HNOI2017大佬(动态规划+bfs)
注意到怼大佬的操作至多只能进行两次.我们逐步简化问题. 首先令f[i][j]表示第i天结束后自信值为j时至多有多少天可以进行非防御操作(即恢复自信值之外的操作).这个dp非常显然.由于最终只需要保证存 ...
- P2707 Facer帮父亲
题目背景 Facer可是一个孝顺的孩纸呦 题目描述 Facer的父亲是一名经理,现在总是垂头丧气的. Facer问父亲,怎么啦?父亲说,公司出了点问题啊. 公司管理着N个风景点,每个风景点都有不少人来 ...
- SharePoint 2013 APP 开发示例 系列
SharePoint 2013 APP 安全: SharePoint 2013 APP 开发示例 (一)List 读写 SharePoint 2013 APP 开发示例 (二)获取用户信息 Share ...