html 标签: image也能提交form!!!

html 标签: image也能提交form!!!


image也能提交form

先前经常使用“<input type="submit" value="input_submit"/>” 来提交form

今天在项目中进行开发的过程中有这么一个功能:

点击“XXX”按钮,进行form表单的提交,但是这个提交按钮是一个type="image" 的input;

找了半天也没看到这个图片元素绑定的js提交表单的相关信息。

后来向度娘问了下,原来:【image也能提交form!!!】


实践(IE8、firefox 33.1

以下是我做的几个实验(IE8、firefox 33.1下的执行结果不同)。

这里要重点注意:如果image标签用不好,会出现2次提交的问题


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>【注意: image也能提交form!!! IE8、firefox 33.1下版本调试】</title>
<script type="text/javascript">
function formSubmit(){
	alert("It is not a Joke! It is true~~");
	document.jokeForm.action = "notAJoke.do?method=justATest";
	document.jokeForm.submit();
	return true;
}
</script>
</head>
<body>
	<form name="jokeForm" method="post" action="aJoke.do">
		<input name="user_name" value="" /><br />
		<input name="user_pass" value="" /><br />
		
		<!-- 以下写法,IE8、firefox 33.1 均只提交【1】次:/aJoke.do -->
		<!-- <input type="image" src="abc.gif"/> -->
		
		<!-- 以下写法,<span style="background-color: rgb(255, 102, 102);">IE提交【2】次:/notAJoke.do ,firefox 33.1 提交【1】次</span> -->
		<!-- <input type="image" src="http://avatar.csdn.net/A/D/0/3_jackpk.jpg" οnclick="formSubmit()"/> -->
		
		<!-- 以下写法,<span style="background-color: rgb(255, 153, 102);">IE提交【2】次:/notAJoke.do ,firefox 33.1 提交【1】次</span> -->
		<!-- <input type="image" src="http://avatar.csdn.net/A/D/0/3_jackpk.jpg" οnclick="formSubmit();return true;"/> -->
		
		<!-- 以下写法,<span style="background-color: rgb(255, 255, 102);">IE8、firefox 33.1 均只提交【1】次:</span>/aJoke.do -->
		<!-- <input type="image" src="http://avatar.csdn.net/A/D/0/3_jackpk.jpg" οnclick="<span style="background-color: rgb(255, 255, 102);">return true;</span>"/> -->
		
		<!-- 以下写法,I<span style="background-color: rgb(255, 255, 102);">E8、firefox 33.1 均【无提交】 </span>-->
		<!-- <input type="image" src="http://avatar.csdn.net/A/D/0/3_jackpk.jpg" οnclick="<span style="background-color: rgb(255, 255, 102);">return false;</span>"/> -->
		
		<!-- 以下写法,IE8、firefox 33.1 均提交【1】次:/aJoke.do -->
		<input type="submit" value="input_submit"/>
	</form>
</body>
</html>




评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值