html 标签: image也能提交form！

！！


image也能提交form

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

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

点击“XXX”button，进行form表单的提交，可是这个提交button是一个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" onclick="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" onclick="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" onclick="<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" onclick="<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>

html 标签: image也能提交form！！！的更多相关文章

  1. ajax提交form表单资料详细汇总

    一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...

  2. 按下回车默认提交form表单问题

    最近开发中碰到一个问题,项目中有几个列表展示页面,允许用户通过查询条件模糊查询数据.用户录入关键字后点击回车会调用查询方法根据关键字查询,原先功能没有问题,但是最近发现在查询输入框中按下回车会直接刷新 ...

  3. input标签之外是否一定添加form标签

    原文转载自:https://blog.csdn.net/lamanchas/article/details/78753031 input标签外是否添加form标签需要按情形区分:应用场景的区别:1.所 ...

  4. 通过jQuery的Ajax方式来提交Form表单

    通过jQuery的Ajax方式来提交Form表单 $.ajax({ url:ajaxCallUrl, type:"POST", cache:true, async:false, d ...

  5. 【转】HTML怎样使用a标签以post方式提交

    在HTML中,a标签的提交默认是get方式提交的,如果在请求链接的参数中带有中文就会出现乱码问题,除了在后台程序中转码外,这里介绍两种简单的方法,可以在客户端让a标签以post方式提交. 一:增加一个 ...

  6. ajax提交form表单

    1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...

  7. Jquery通过Ajax方式来提交Form表单

    今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...

  8. 导出excel用ajax不行，提交form表单可以

    导出excel用ajax不行,提交form表单可以. 一直用ajax找原因,网页不出现下载提示框 写了 response.setContentType("application/binary ...

  9. JQuery validate.js 在ajax提交form时如何触发

    在使用jquery validate.js 插件时,发现,如果是用onclick事件捕获提交按钮的动作,并且ajax动态提交form,验证不会被触发,而是直接提交了form. 后来发现,需要手动调用该 ...

随机推荐

  1. 终端安全工具 gartner 排名

    Reviews for Endpoint Detection and Response Solutions What is Endpoint Detection and Response Soluti ...

  2. WEBSERVICE之JDK开发webservice

    转自:https://www.cnblogs.com/w-essay/p/7357262.html 一.开发工具与环境 1. jdk1.6版本以上(jdk1.6.0_21及以上版本) 2 .eclip ...

  3. batch normalization学习理解笔记

    batch normalization学习理解笔记 最近在Andrew Ng课程中学到了Batch Normalization相关内容,通过查阅资料和原始paper,基本上弄懂了一些算法的细节部分,现 ...

  4. Noip前紧急抢救

    管他会不会,知道结论就好了 紧急抢救知识 斯特林数 第一类斯特林数 递推公式 \[ S[n][k]=(n-1)\times S[n-1][k]+S[n-1][k-1] \] 处理的问题是将n个数划分为 ...

  5. （转载） Android Studio你不知道的调试技巧

    Android Studio你不知道的调试技巧 标签: android studio 2015-12-29 16:05 2514人阅读 评论(0) 收藏 举报  分类: android(74)    ...

  6. 读书笔记之《HTML5 与 CSS3 基础教程》

    1· 读前预期 考虑到对于 Web 开发零基础,凡涉足一件未知的任务,最好先理清任务的逻辑结构,然后有目的地逐步学习.为实现我们的需求和设计,必须要学习前端.后端.服务器等一系列暂时陌生的知识,在此, ...

  7. 防范CSRF（三）

    除了可以更改微软默认的cookie的名字外,还可以更改默认的加密方法.继承IAntiForgeryAdditionalDataProvider接口,实现里面的方法即可. 采用的加密方法有加盐和使用时间 ...

  8. CorelDRAW教程：怎样绘制制作箭头流程图？

    箭头流程图主要由矢量图和连接符组成,通过图形之间的顺序阐述的一个过程,应用也是非常广泛,有些软件中会自带流程图,对于CDR这款矢量绘图软件来说,手动制作流程图是简单且高效的.首先CorelDRAW中就 ...

  9. ZBrush 4R7中为笔刷设置快捷键

    为了便于雕刻.提高雕刻速度,ZBrush®不仅很人性化地设计了自定义笔刷,用户还可以自行设置笔刷快捷键,步骤如下. ZBrush 4R8下载:http://wm.makeding.com/iclk/? ...

  10. NTP同步底层实现

    RFC http://www.ietf.org/rfc/rfc5905.txt https://www.eecis.udel.edu/~mills/ntp/html/select.html https ...