在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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
浅谈js闭包理解
Mar 28 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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
PHP开发的一些注意点总结
2010/10/12 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
python paramiko模块学习分享
2017/08/23 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python 复平面绘图实例
2019/11/21 Python
Python with标签使用方法解析
2020/01/17 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
销售冠军获奖感言
2014/02/03 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
失职检讨书大全
2015/01/26 职场文书
春节慰问信范文
2015/02/15 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫