<input type="button" /> 和<input type="submit" /> 的区别
<input type="button" /> 这就是一个按钮。如果你不写javascript 的话,按下去什么也不会发生。
<input type="submit" /> 这样的按钮用户点击之后会自动提交 form,除非你写了javascript 阻止它。
当表单使用ajax提交表单时,不可使用<input type="submit" />,应该使用<input type="button" />
当form表单中action 为空 使用ajax提交 type=submit时
IE, 火狐ajax提交不成功,chrome浏览器可提交
但后台会抛异常,异常如下
java.io.IOException: 你的主机中的软件中止了一个已建立的连接。 java.lang.IllegalStateException: getOutputStream() has already been called for this response 严重: Exception Processing ErrorPage[errorCode=500, location=/WEB-INF/views/error/500.jsp]
org.apache.jasper.JasperException: javax.servlet.ServletException: java.lang.IllegalStateException: Cannot create a session after the response has been committed
相似问题http://www.cnblogs.com/jstarseven/p/4979975.html
公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的。。。。
错误地点:
<input type="submit" value="提交" class="btn" id="formSubmit" onclick="checkForm()" />
type类型写成submit,而在checkForm中也进行了form提交。
type=“button”和type="submit"在IE firefox 360下分别进行submit()提交和走ajax测试:
测试代码:
<body>
<form id="form1" method="get" >
<input name="username" value="zhangsan" /><br>
<input name="age" value="20" /><br>
<input name="address" value="beijing" /><br>
<input name="birthday" value="10-12" /><br>
<input name="contactInfo.tel" value="13321464327" /><br>
<input name="contactInfo.address" value="hebei" /><br>
<input id="subbutton" type="submit" value="submit" onclick=""/>
<!-- <input id="subbutton" type="button" value="submit" onclick="submit();"/> -->
</form>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() { $("#subbutton").click(function() {
$.ajax({
type : "POST",
url : "queryItems.action?name='xuhui'",
data : $("#form1").serialize(),
async : false,
dataType : "json",
success : function(data) { }
});
}); // function submit(){
// $("#form1").submit();
// }
});
</script>
</body>
测试结果:
type=“submit”
普通submit:
IE 提交form two
firefox 提交form one
360 提交form one
ajaxsubmit:
IE two
firefox two
360 two
type="button"
普通submit:
IE one
firefox one
360 one
ajaxsubmit:
IE one
firefox one
360 one
结果分析:
type=button 就单纯是按钮功能
type=submit 是发送表单
但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:
使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一.
用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。
<input type="submit" name="submit" value="提交" onClick="submit()">
执行完onClick,转到action。可以自动提交不需要在onClick中进行提交。所以说onclick这里可以不要。
这里就可以解释为什么上面会出现重复提交了,但是重复提交情况只会在IE浏览器中,firefox 和360就没有,猜想应该是对form提交进行了优化。
<input type="button" name="button" value="提交" onClick="submit()">
执行完onClick,跳转文件在 js文件里控制。提交需要onClick。
<input type="button" /> 和<input type="submit" /> 的区别的更多相关文章
- ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系
ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...
- <button>和<input type="button"> 的区别
<button>标签 定义和用法 <button> 标签定义一个按钮. 在 button 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 input 元素创建的按钮 ...
- <button>与<input type="button">的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- 解析button和input type=”button”的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- 【转】解析<button>和<input type="button"> 的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- 了解HTML表单之input元素的23种type类型
目录 传统类型 text password file radio checkbox hidden button image reset submit 新增类型 color tel email url ...
- HTML(七)HTML 表单(form元素介绍,input元素的常用type类型,input元素的常用属性)
前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...
- HTML表单之input元素的23种type类型
摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...
- HTML中button和input button的区别
button和input button的区别 一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控 ...
随机推荐
- Mysql根据数据库的时间字段到点更新另外的状态。
转载:https://blog.csdn.net/xingfuzhijianxia/article/details/53727820 需求如下: 添加一条提醒,被提醒人在提醒时间未到达的时候收不到此提 ...
- Docker的基础知识与安装(Ubantu CentOS)
Docker是一种允许特殊类型虚拟化的实用程序.Docker允许使用Docker镜像在系统上“虚拟”运行程序.可以下载或创建可以运行的图像.一旦加载并执行了图像,它现在就是一个容器.容器已为容器内的程 ...
- 解题报告:hdu 1073 Online Judge
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1073 Problem Description Ignatius is building an Onli ...
- 题解报告:hdu 1257 最少拦截系统(贪心)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1257 Problem Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是 ...
- Oracle查询使用空间比较大的前15个表
-- 查询使用空间比较大的前15个表 select a.* from( ,2) all_size from dba_segments where SEGMENT_TYPE='TABLE' order ...
- 转 pygame学习笔记(1)——安装及矩形、圆型画图
http://www.cnblogs.com/xiaowuyi/archive/2012/06/06/2538921.html
- CF916C Jamie and Interesting Graph
思路:构造 实现: #include <bits/stdc++.h> using namespace std; int main() { int n, m; cin >> n ...
- 常用linux命令大全 转载自:https://www.cnblogs.com/laov/p/3541414.html(大牛笔记)
Linux简介及Ubuntu安装 Linux,免费开源,多用户多任务系统.基于Linux有多个版本的衍生.RedHat.Ubuntu.Debian 安装VMware或VirtualBox虚拟机.具体安 ...
- Android 给按钮添加监听事件
在安卓开发中,如果要给一个按钮添加监听事件的话,有以下三种实现方式 1.方式一 public class MainActivity extends ActionBarActivity { @Overr ...
- R in action 读书笔记(1)--第五章:高级数据管理
5.2.1数学函数 函数 描述 abs(x) 绝对值 sqrt(x) 平方根 ceiling(x) 不小于x的最小整数 floor(x) 不大于x的最大整数 trunc(x) 向0的方向截取的X中的整 ...