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 相关文章推荐
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
vue实现全选和反选功能
Aug 31 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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
基于文本的访客签到簿
2006/10/09 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
python实现简单加密解密机制
2019/03/19 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
Python远程方法调用实现过程解析
2020/07/28 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
神路信息Java面试题目
2013/03/31 面试题
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
2015年春节标语口号
2014/12/09 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js