onsubmit阻止form表单提交与onclick的相关操作


Posted in Javascript onSeptember 03, 2010

1. return 的返回值问题,函数中return一旦有返回值,就不在执行下面的语句,直接跳到函数调用的地方。如下PHP函数代码,第一个if条件符合则函数值返回布尔型false,可以返回一个函数的值,并且跳出这个函数;只要遇到return语句,程序就在那一行代码停止执行,执行控制将立刻返回到调用该程序的代码处。function

function chkinput(form) 
{ 
if(form.title.value=="") 
{ 
alert("请输入文章标题!"); 
form.title.select(); 
return false; 
} if(form.content.value=="") 
{ 
alert("文章正文不能为空@!!"); 
form.content.select(); 
return false; 
} 
return true; 
}

2.form的onsubmit属性的触发问题,onsubmit 事件什么时候触发?onsubmit 事件会在表单中的确认按钮被点击时发生。不触发的原因有一般如下:

A. onsubmit属性的触发时机是在form用input:submit这样的button提交时才会触发,否则不会触发。如果是用一个普通input:button,则在onclick属性中指定一个javascript函数,在这个函数里面再执行form的submit()函数,而不是onsubmit属性。

B. 先看一段代码:

<form action="index.jsp" method="post" onsubmit="submitTest();"> 
<INPUT value="www"> 
<input type="submit" value="submit"> 
</form> <SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function submitTest() { 
// 一些逻辑判断return false; 
} 
//--></SCRIPT>

点击submit按钮该表单并未提交。因为有一处应该改为下列代码 :
<form action="index.jsp" method="post" onsubmit="return submitTest();">原来onsubmit属性就像是<form>这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true;
和Java一样,在该方法体中你可以写任意多个语句,包括内置函数和自定义函数。
在这里submitTest()虽然返回false,但我们只执行了此函数,没有对其结果进行任何处理。
而onsubmit="return submitTest()利用到了它的返回值,达到了预期效果。3.事件处理函数返回false的问题,在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.
例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页. Return False 就相当于终止符,Return True 就相当于执行符。 在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的 onclick时间(如果你指定的话)以外还要触发一个默认事件就是执行页面的跳转。所以如果 你想取消对象的默认动作就可以return false。return false应用比较多的场合有: <body> 1, <a href="/" mce_href="/" onclick='test();'>超级链接 </a> 2, <input type="button" onclick='test()' value="提交"> 3, <form name="form1" onsubmIT="return test();"> 内容 <input type="submIT" value="提交"> </form> </body>
<input type="submit" onclick="submitAction(); return false;" /> submitAction 方法里面有提交表单的动作。如果不加 return false,
在执行完 submitAction 之后,submit 按钮还会继续执行它的默认事件,就会再次提交表单。这可能就是很多错误的根源。 的确,return false的含义不是阻止事件继续向顶层元素传播,而是阻止浏览器对事件的默认处理。你可以这样试验:首先将所有的js脚本注释掉,在IE浏览器中尝试拖动一下图片,你会发现鼠标会成为禁止操作的样式,图片是被禁止拖动的,它是浏览器针对mousemove事件所提供的默认行为。
return false就是为了去掉这种行为,否则就会出现你描述的中断事件连续执行。 另外,和return false等效的语句为:
window.event.returnValue = false,
你可以把return false替换为此语句并进行验证。 最后说明一下,此种方式只适用于IE浏览器。
在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的 onclick时间(如果你指定的话)以外还要触发一个默认事件就是执行页面的跳转。所以如果 你想取消对象的默认动作就可以return false。return false应用比较多的场合有:
<form name="form1" onsubmit="return youfunction();">...... </form> <a href="www.***.com" onclick="...;return false;">dddd </a>
Javascript 相关文章推荐
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
js实现自定义右键菜单
May 18 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
判断浏览器的javascript版本的代码
Sep 03 #Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 #Javascript
JavaScript的类型简单说明
Sep 03 #Javascript
JavaScript类和继承 this属性使用说明
Sep 03 #Javascript
JavaScript类和继承 prototype属性
Sep 03 #Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 #Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 #Javascript
You might like
php生成略缩图代码
2012/07/16 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php实现socket推送技术的示例
2017/12/20 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
详解Python中的type()方法的使用
2015/05/21 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
浅析Python函数式编程
2018/10/06 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
Python list和str互转的实现示例
2020/11/16 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
迪奥官网:Dior.com
2018/12/04 全球购物
综合内勤岗位职责
2014/04/14 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
公司授权委托书
2014/10/17 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
Python竟然能剪辑视频
2021/05/25 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技