在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 replace方法与正则表达式
Feb 19 Javascript
javascript radio 联动效果
Mar 04 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
js+css在交互上的应用
Jul 18 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
学习并汇集javascript匿名函数
2010/11/25 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
详解Python 正则表达式模块
2018/11/05 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
网页设计个人找工作求职信
2013/11/28 职场文书
上班迟到检讨书
2014/01/10 职场文书
六查六看自查材料
2014/02/17 职场文书
幼儿教师国培感言
2014/02/19 职场文书
公司年会策划方案
2014/05/17 职场文书
物理学专业自荐信
2014/06/11 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
小学生暑假安全公约
2015/07/14 职场文书
python神经网络Xception模型
2022/05/06 Python
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript