在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 相关文章推荐
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
JS判断数组那点事
Oct 10 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
vue中@change兼容问题详解
Oct 25 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实现删除字符串中任何字符的函数
2015/08/11 PHP
javascript 写类方式之九
2009/07/05 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
Python字节单位转换实例
2019/12/05 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Python如何读写字节数据
2020/08/05 Python
如何查看python关键字
2021/01/17 Python
员工培训邀请函
2014/01/11 职场文书
音乐专业自荐信
2014/02/07 职场文书
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS
MySQL池化框架学习接池自定义
2022/07/23 MySQL