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 日期对象Date扩展方法
May 30 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
js全选按钮的实现方法
Nov 17 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
移动端js图片查看器
Nov 17 Javascript
js date 格式化
Feb 15 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
js实现图片实时时钟
Jan 15 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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
PHP生成压缩文件实例
2015/02/07 PHP
10条php编程小技巧
2015/07/07 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
常用DOM整理
2015/06/16 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python实现简单爬虫功能的示例
2016/10/24 Python
python如何在循环引用中管理内存
2018/03/20 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
初级Java程序员面试题
2016/03/03 面试题
致垒球运动员加油稿
2014/02/16 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android