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 继承实例分析
Nov 04 Javascript
Firefox outerHTML实现代码
Jun 04 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
判断浏览器的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匹配UTF-8中文的正则表达式
2015/05/13 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
使用js画图之饼图
2015/01/12 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
简单介绍Python中的RSS处理
2015/04/13 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
感谢信模板大全
2015/01/23 职场文书
海洋天堂观后感
2015/06/05 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电