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 相关文章推荐
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
javascript用函数实现对象的方法
May 14 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 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
php 代码优化的42条建议 推荐
2009/09/25 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
js控制frameSet示例
2013/09/10 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
Ajax主要包含了哪些技术
2014/06/12 面试题
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
消防应急演练方案
2014/02/12 职场文书
迎新晚会主持词
2014/03/24 职场文书
项目投资意向书
2014/04/01 职场文书
新闻人物通讯稿
2014/10/09 职场文书
捐资助学感谢信
2015/01/21 职场文书
刘胡兰观后感
2015/06/16 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
学生会自荐信
2019/05/16 职场文书