在javaScript中关于submit和button的区别介绍


Posted in Javascript onOctober 20, 2013

submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了。
如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把submit改成button,即取消其自动提交的行为,否则,将会造成提交两次的效果,对于动态网页来说,也就是对数据库操作两次。或者在使用submit时验证时加return true或false。
submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上,submit会提交表单,button不会提交表单. 两者主要区别在于:
submit默认为form提交,可以提交表单(form).
button则响应用户自定义的事件,如果不指定onclick等事件处理函数,它是不做任何事情.当然,button也可以完成表单提交的工作. INPUT type=submit 即发送表单,按回车提交表单

INPUT type=button 就是单纯的按钮功能,提交的是innerTEXT

===============submit 和 button的详细对比===================================
submit:特殊的button,会自动将表单的数据提交,onClick方法不加return 会自动提交,并不会起到约束的作用,
所以,使用submit时需要验证请加 return true或false.
例:<input type="submit" name="Submit" value="注 册" onClick=" return check();">,在JS中判断的时候 写return true; 或者 return false; button:普通的按钮,不会自动提交表单数据.可以在JS中显式提

交:document.form1.submit(),使用场合: 一个页面有多个提交按钮,需要根据用户的操作来确定到底提交到哪个控制器,这种情况下,就需要在JS中判断用户的操作,然后根据操作来给document.form1.action赋值并且document.form1.submit()来提交

===============如果想好所有的提交都在一个servlet中处理,该怎么做==================
提交的按钮也是HTML组件,所以也可以通过 getParameter()来得到,那么getParameter()的参数也需要固定下来

参数就是所有的表单的提交按钮的name,当然提交按钮的name要一样才能统一在一个servlet中根据提交按钮的值来区别操作

附代码:

js文件
在javaScript中关于submit和button的区别介绍 
用submit的时候,jsp页面
在javaScript中关于submit和button的区别介绍 
用button的时候,jsp代码
在javaScript中关于submit和button的区别介绍

Javascript 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
DOM 高级编程
May 06 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 #Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 #Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 #Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 #Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 #Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 #Javascript
jquery 循环显示div的示例代码
Oct 18 #Javascript
You might like
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP经典面试题集锦
2015/03/19 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
json简单介绍
2008/06/10 Javascript
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
js实现筛选功能
2020/11/24 Javascript
python的Template使用指南
2014/09/11 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
用python制作游戏外挂
2018/01/04 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
安全教育月活动总结
2014/05/05 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
2015年预算员工作总结
2015/05/14 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python