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

版权所有,禁止匿名转载;禁止商业使用。

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


image也能提交form


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


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


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


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


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


实践


以下是我做的几个实验。


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

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

注:以上均IE8下测试结果,firefox下暂未测试


0 0