在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 继承实现方法
Aug 26 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
javascript实现移动端轮播图
Dec 09 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 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
JS交换变量的方法
2015/01/21 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
python练习程序批量修改文件名
2014/01/16 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
实例详解Python模块decimal
2019/06/26 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
二手书店创业计划书
2014/01/16 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
经济管理专业求职信
2014/06/09 职场文书
赔偿协议书范本
2014/09/12 职场文书
生产现场禁烟通知
2015/04/23 职场文书
2015年市场部工作总结
2015/04/30 职场文书
职工培训工作总结
2015/08/10 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers