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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
javascript中的面向对象
Mar 30 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 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
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
python通过加号运算符操作列表的方法
2015/07/28 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
详解python字节码
2018/02/07 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python函数的万能参数传参详解
2019/07/26 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
python计算导数并绘图的实例
2020/02/29 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
师德先进个人材料
2014/12/20 职场文书
教师节获奖感言
2015/07/31 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫
apache ftpserver搭建ftp服务器
2022/05/20 Servers