在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统计用户下载网页所需时间的脚本
Oct 15 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
前端jquery部分很精彩
May 03 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 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
PHP实现多图片上传类实例
2014/07/26 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP中header用法小结
2016/05/23 PHP
PHP链表操作简单示例
2016/10/15 PHP
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
ES6的新特性概览
2016/03/10 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
Python中的pprint折腾记
2015/01/21 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
django做form表单的数据验证过程详解
2019/07/26 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
应届实习生的自我评价范文
2014/01/05 职场文书
实习单位接收函模板
2014/01/10 职场文书
打架检讨书300字
2014/02/02 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
阳光体育活动总结
2014/04/30 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
高二语文教学反思
2016/02/16 职场文书