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的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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中的日期及时间
2006/11/23 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
python实现决策树分类
2018/08/30 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
基于matplotlib xticks用法详解
2020/04/16 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
Python实现画图软件功能方法详解
2020/07/28 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
门卫工作岗位职责
2013/12/17 职场文书
班组长工作职责
2013/12/25 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
小学少先队活动方案
2014/02/18 职场文书
幼儿教师培训感言
2014/03/08 职场文书
个人考核材料
2014/05/15 职场文书
经济管理专业求职信
2014/06/09 职场文书
模范班主任事迹材料
2014/12/17 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python