很多情况下为了美化表单都会把提交按钮改成用一个图片来代替。但如果没有注意细节的话会造成表单的重复提交,导致一些莫名其妙的错误,例如重复插入数据库记录之类的。
我们看以下一段简单的表单代码:
<form id="loginform" name="loginform" action="http://game.bluesky.cn/login.php" method="get">
<input name="name" />
<input type="image" src="login.gif" name="imagesubmit" />
</form>
这段代码是正确的,不会有重复提交的问题。“<input type="image">”其实和“<input type="SUBMIT">”起到的作用是相同的,一点那个图片就会执行submit()操作。
但有的人不放心,画蛇添足的给image加了个onclick动作,代码如:
<form id="loginform" name="loginform" action="http://game.bluesky.cn/login.php" method="get">
<input name="name" />
<input onclick="document.loginform.submit()" type="image" src="login.gif" name="imagesubmit" />
</form>
这下子点一次图片按钮就提交两次了,重复提交由此产生。其功能就相当于:
<input type="SUBMIT" onclick="submit()">
当然是不对的了。
如果一定要用onclick事件的话,可以用<img>来替代<input type="image">,如下也是可以正常工作的代码:
<form id="loginform" name="loginform" action="http://game.bluesky.cn/login.php" method="get">
<input name="name" />
<img onclick="document.loginform.submit()" src="login.gif" name="imagesubmit" />
</form>
本人就是遇到这个阴沟里翻船的问题,导致用户登录时提交的图形验证码怎么都不对。想想,用户都提交两次了,第二次提交时验证码还能对吗?
2. 图片按钮如何禁止重复提交?
<input type="image" src="bt.gif" onclick="submit()">
这样的按钮如何禁止重复提交呢?
解决方案:
<input type="image" src="bt.gif" onclick="submit();this.disabled=true">
采用这种方式可以避免使用图片按钮的重复提交
但现在有三个这样的按钮在一起,我想按其中一个后,所有三个都不能再提交了。
解决方案:
<script language="JavaScript">
function test(){
for(i=0;i<document.getElementsByName('t1').length;i++)
document.getElementsByName('t1')[i].disabled=true;
}
</script>
<form name="f1" method="post" action="1.htm" target="_blank" onsubmit="test()">
<input type="image" name="t1" src="http://bbs.51js.com/images/standard/newtopic.gif">
<input type="image" name="t1" src="http://bbs.51js.com/images/standard/newtopic.gif">
<input type="image" name="t1" src="http://bbs.51js.com/images/standard/newtopic.gif">
</form>
利用图片提交表单有两种方式:
1.<input type="image" src="xxx.gif" >
此图片会自动对Form表单进行提交,即为type="submit" 若提交前要进行判断、检验则用
<input type="image" src="xxx.gif" onclick="return dosubmit();">
但是用这种方式提交会发生表单提交两次的现象,经常会造成表单元素被重复提交,数据库被写入异常!!
尤其是用IE问题比较严重,用火狐的话还不会报错!此时注意,要把数据库设置为同一信息要唯一!
原因:HTML 中 image的描述是“创建一个图像控件,该控件单击后将导致表单立即被提交”。
2.<img alt="提交" src="xxx.gif" onclick="return dosubmit();" style="cursor:pointer;">
这种方式提交是正常的没有问题, 效果和上面是一样的。所以,请少用第一种方式提交数据尤其是在struts的应用中
注意:css: cursor:hand只能被IE识别,火狐是不能识别的。而pointer则可以兼容!
注!无论哪种方式提交都在包含在<form></form>之间,否则,提交无效
分享到:
相关推荐
提交表单后提交禁用提交按钮,防止重复提交.
下面详细解释几种防止Layui表单重复提交的方法。 首先,在HTML表单中,为了避免在提交时页面刷新导致的重复提交,可以在标签中使用onsubmit="return false;"属性。这个属性的作用是在表单提交时返回false,阻止...
在Web开发中,表单重复提交是一个常见的问题,可能导致数据的冗余或错误。JavaScript作为客户端脚本语言,可以通过多种策略来防止用户意外或恶意地多次提交表单。以下是一些关键的知识点: 1. **禁用提交按钮**:最...
当用户在表单中填写完信息后点击提交按钮,如果此时网络环境不稳定或用户在短时间内连续点击多次提交按钮,则可能导致同一份数据被多次发送到服务器端。这种情况下,不仅增加了服务器的压力,还可能导致数据库中的...
在IT行业中,尤其是在前端开发领域,防止用户重复提交是一项重要的任务,这有助于避免因网络延迟或用户误操作导致的数据混乱。Element-UI,一个流行的Vue.js组件库,提供了多种方式来处理这个问题。以下是如何在使用...
在IT行业中,尤其是在Web开发领域,防止用户多次重复提交数据是一项重要的任务,这可以避免数据库出现冗余数据,保持系统稳定。"修改禁止多次重复提交"这个话题涉及到前端交互、后端处理以及数据库操作等多个层面。...
在Web开发中,用户表单重复提交是一个常见的问题,它可能导致数据冗余或者数据库状态的不一致。本示例提供了一种解决方案,包括在前端JavaScript和后端进行处理,以防止用户因网络延迟或误操作导致的多次提交。 ...
在现代Web应用开发中,防止表单重复提交是一项重要的任务,因为这可能导致数据不一致性和服务器资源浪费。本文将深入探讨如何使用Spring Boot 2.1、Redis和拦截器来实现这一功能。以下是对这个主题的详细解释: ...
在Web应用中,表单重复提交是一种常见的问题。通常,这种问题发生在用户在提交表单后,由于网络延迟或用户的误操作再次点击提交按钮,或者在表单提交后刷新浏览器页面。这两种情况都可能导致服务器接收到重复的请求...
在ASP.NET web应用程序中,表单重复提交是一个常见的问题,可能导致数据不一致或者数据库操作的冗余。为了确保用户在提交表单时不会无意或有意地多次发送请求,我们需要实施有效的防止表单重复提交的策略。以下是...
然而,如果不仔细处理,使用图片作为提交按钮时可能会导致表单重复提交的问题。这种问题不仅影响用户体验,还可能引发如数据库记录重复插入等错误。 首先,我们需要了解表单提交的基本原理。在HTML中,`<form>`标签...
在Web开发中,表单重复提交是一个常见的问题,它可能会导致数据冗余或者不一致,尤其是在处理关键操作如交易、订单或用户注册时。这里我们深入探讨这个问题,并提供解决方案。 标题"表单重复提交问题1"所涉及的核心...
然而,如果没有适当处理,可能会出现表单重复提交的问题,这可能导致数据的不一致性和服务器资源的浪费。本篇文章将深入探讨如何防止表单重复提交,主要关注于基于Struts2框架的解决方案。 首先,理解表单重复提交...
本篇文章将探讨如何有效地防止JSP页面中的表单重复提交,确保系统的稳定性和数据的准确性。 一、理解表单重复提交的问题 当用户点击提交按钮后,由于网络延迟或浏览器刷新等原因,可能导致同一份表单数据多次发送...
表单重复提交可能发生在用户点击提交按钮后,由于网络延迟或刷新页面等原因,导致请求被多次发送到服务器。如果不加以控制,可能会导致同一份数据被处理多次,从而对数据库造成不必要的影响。 二、Token机制的原理 ...
几种防止表单重复提交的方法 禁掉提交按钮。表单提交后使用Javascript使提交按钮disable。这种方法防止心急的用户多次点击按钮。但有个问题,如果客户端把Javascript给禁止掉,这种方法就无效了。 我之前的文章曾说...
### ASP.NET中防止刷新页面造成表单重复提交 在Web应用程序开发中,特别是在使用ASP.NET进行网站构建时,一个常见的问题是表单重复提交。这通常发生在用户通过按下浏览器的F5键来刷新页面的情况下,此时之前的表单...
好友使用vue技术封装了一个专门用于提交表单和下载文件的“防抖按钮”,其实现原理和使用方法看这里 https://blog.csdn.net/PursueExcellence/article/details/103903139。