当前位置: 首页 > 图文教程 > 网络编程 > Javascript > input、button的不同type值在ajax提交表单时导致的陷阱

Javascript
JS 文件本身编码转换 图文教程
jQuery Ajax之$.get()方法和$.post()方法
jQuery Ajax之load()方法
JavaScript 核心参考教程 内置对象
JavaScript 核心参考教程 RegExp对象
javascript hashtable实现代码
百度留言本js 大家可以参考下
javascript 判断某年某月有多少天的实现代码 推荐
让iframe子窗体取父窗体地址栏参数(querystring)
jquery pagination插件实现无刷新分页代码
jQuery与javascript对照学习 获取父子前后元素 实现代码
通用javascript脚本函数库 方便开发
JQuery 绑定事件时传递参数的实现方法
支持IE,Firefox的javascript 日历控件
javascript 变速加数功能实现代码
extjs 学习笔记(一) 一些基础知识
extjs 学习笔记(二) Ext.Element类
Jquery 学习笔记(一)
一些技巧性实用js代码小结
jquery 常用操作整理 基础入门篇

Javascript 中的 input、button的不同type值在ajax提交表单时导致的陷阱


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 294 ::
收藏到网摘: n/a

最近在公司的项目中尝试着利用YUI来实现各种效果。 今天在做利用connection 作表单提交过程中发现,标签"input"跟"botton"中的type属性设置原来也是一门学问。
在开发过程中,为了使html代码更加整洁,我首先利用YAHOO.util.Event.addListener(obj, "click", callback)类加载"click"事件来提交表单,YAHOO.util.Connect.asyncRequest('POST')方式来上传表单数据,如果表单信息不正确,那么作返回处理。而提交的按钮我采用的是<button type="submit">提交</button>。
这时发现除了IE6能够对我的表单数据作出正确的处理外,FIREFOX包括IE7都不能对我的错误处理作出回应(callback方法中,正对错误的处理方式是:只要一碰到错误,那么就通过return false的方式返回)。
这时在我的思路里想的是,在语句中提交表单数据前我已经做了返回处理,可页面怎么还是给刷新了呢。
晚上回到家里再次对今天碰到的问题做测试,结果发现,我忽略了一点,数据也的确是有提交了,并且在地址栏中可以明确地看到各种数据,而事实也证明,数据肯定是被提交了,于是想到了我的按钮,按钮的类别设置是"submit",之前在写代码时,都是直接在"input"或者"button"中,如果类别设置为"submit"时,都是这样写的onclick="return fun();"或者onclick="fun(); return false;";这自然是不会出现问题,怪就怪在,addListener类的值并不是直接影响到按钮的,一点击按钮,自然也就会提交数据了。
惨痛啊~~~~
附:button默认type值为submit,因此最好标识下类别!!!谨记!