在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模拟实现Array的sort方法
Dec 11 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
微信小程序实现自定义加载图标功能
Jul 19 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提取中文首字母
2008/04/09 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
srcElement表格样式
2006/09/03 Javascript
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
js 单引号 传递方法
2009/06/22 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
vue.js的提示组件
2017/03/02 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
原生JS实现天气预报
2020/06/16 Javascript
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Django values()和value_list()的使用
2020/03/31 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
公司任命书范本
2014/06/04 职场文书
单位证明范文
2015/06/18 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers