开发者社区> 杰克.陈> 正文

在javascript中关于submit和button提交表单区别

简介: 原文:在javascript中关于submit和button提交表单区别   原文来自:http://www.jb51.net/article/42236.htm   submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上。
+关注继续查看
原文:在javascript中关于submit和button提交表单区别

 
 
submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上。
 
     1、 如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把submit改成button,即取消其自动提交的行为,
否则,将会造成提交两次的效果,对于动态网页来说,也就是对数据库操作两次。或者在使用submit时验证时加return true或false。 

    2、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文件 
 
用submit的时候,jsp页面 
 
 
用button的时候,jsp代码 

 
 
理解:
submit是特殊的button,会直接提交表单,使用button时 ,不要又onclick函数,才会提交表单。
 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
基于H5+css+JavaScript实现button悬停时边框滑动
基于H5+css+JavaScript实现button悬停时边框滑动
47 0
记一次js之button问题
问题描述:记得某天,发现一件让我非常气愤的事情,居然因为一个按钮导致页面跳转失败或者是根本跳转不了界面,哪怕404也不给我报。 问题回现步骤: (1)正常输入url localhost:8080/test 可以看到一个登陆界面; (2)正常录入表单信息点击提交,在输入正确的用户名和密码的前提下,居然最后出现这样的情况 地址由localhost:8080/test变为localhost:8080/test/? 多了一个问号,这让我觉得非常奇怪。
981 0
button按钮提交form表单的js方法不要使用关键字login
    在使用button按钮提交form表单时,js方法不要使用关键字login,否则你会遇到莫名其妙的警告而无法正常执行!     js代码如下:         function login(){     var username=document.
1116 0
js触发asp.net的Button的Onclick事件
在asp.net引入事件驱动之后,在一个页面上很容易解决多个按钮触发不同事件的问题,避免了在asp中需要多个form或者通过js脚本来控制 的麻烦。 asp.net带来便利的同时,也带来一个问题。在实际应用中一个页面存在多个按钮的情况并不多。
1247 0
javascript如何触发button 的click事件
解决方法: var   btn   =   document.getElementById( "btnOK ");//btnOK为服务器button控件         btn.click();
493 0
【原生JS】做一个打字消除小游戏,学习摸鱼两不误
【原生JS】做一个打字消除小游戏,学习摸鱼两不误
7 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
Javascript异步编程
立即下载
Javascript中的对象
立即下载
JS零基础入门教程(上册)
立即下载