在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不同页面传值的改进版
Sep 30 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
Vue.js中的组件系统
May 30 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
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
获取Django项目的全部url方法详解
2017/10/26 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Python求解正态分布置信区间教程
2019/11/20 Python
Shell如何接收变量输入
2012/09/24 面试题
孝老爱亲模范事迹
2014/01/24 职场文书
老师的检讨书
2014/02/23 职场文书
对标管理实施方案
2014/03/12 职场文书
医院搬迁方案
2014/06/14 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
消防安全月活动总结
2015/05/08 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis