`

图片提交按钮与表单重复提交

阅读更多
很多情况下为了美化表单都会把提交按钮改成用一个图片来代替。但如果没有注意细节的话会造成表单的重复提交,导致一些莫名其妙的错误,例如重复插入数据库记录之类的。



我们看以下一段简单的表单代码:

<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 form表单重复提交的实现方法

    下面详细解释几种防止Layui表单重复提交的方法。 首先,在HTML表单中,为了避免在提交时页面刷新导致的重复提交,可以在标签中使用onsubmit="return false;"属性。这个属性的作用是在表单提交时返回false,阻止...

    javascript方式防止表单重复提交

    在Web开发中,表单重复提交是一个常见的问题,可能导致数据的冗余或错误。JavaScript作为客户端脚本语言,可以通过多种策略来防止用户意外或恶意地多次提交表单。以下是一些关键的知识点: 1. **禁用提交按钮**:最...

    ajax 防止按钮重复提交

    当用户在表单中填写完信息后点击提交按钮,如果此时网络环境不稳定或用户在短时间内连续点击多次提交按钮,则可能导致同一份数据被多次发送到服务器端。这种情况下,不仅增加了服务器的压力,还可能导致数据库中的...

    element-ui如何防止重复提交的方法步骤

    在IT行业中,尤其是在前端开发领域,防止用户重复提交是一项重要的任务,这有助于避免因网络延迟或用户误操作导致的数据混乱。Element-UI,一个流行的Vue.js组件库,提供了多种方式来处理这个问题。以下是如何在使用...

    修改禁止多次重复提交

    在IT行业中,尤其是在Web开发领域,防止用户多次重复提交数据是一项重要的任务,这可以避免数据库出现冗余数据,保持系统稳定。"修改禁止多次重复提交"这个话题涉及到前端交互、后端处理以及数据库操作等多个层面。...

    防止用户表单重复提交处理

    在Web开发中,用户表单重复提交是一个常见的问题,它可能导致数据冗余或者数据库状态的不一致。本示例提供了一种解决方案,包括在前端JavaScript和后端进行处理,以防止用户因网络延迟或误操作导致的多次提交。 ...

    springboot2.1+redis+拦截器 防止表单重复提交

    在现代Web应用开发中,防止表单重复提交是一项重要的任务,因为这可能导致数据不一致性和服务器资源浪费。本文将深入探讨如何使用Spring Boot 2.1、Redis和拦截器来实现这一功能。以下是对这个主题的详细解释: ...

    Struts2解决表单重复提交

    在Web应用中,表单重复提交是一种常见的问题。通常,这种问题发生在用户在提交表单后,由于网络延迟或用户的误操作再次点击提交按钮,或者在表单提交后刷新浏览器页面。这两种情况都可能导致服务器接收到重复的请求...

    防止表单重复提交(asp.net )

    在ASP.NET web应用程序中,表单重复提交是一个常见的问题,可能导致数据不一致或者数据库操作的冗余。为了确保用户在提交表单时不会无意或有意地多次发送请求,我们需要实施有效的防止表单重复提交的策略。以下是...

    图片按钮提交与表单重复提交问题探讨

    然而,如果不仔细处理,使用图片作为提交按钮时可能会导致表单重复提交的问题。这种问题不仅影响用户体验,还可能引发如数据库记录重复插入等错误。 首先,我们需要了解表单提交的基本原理。在HTML中,`&lt;form&gt;`标签...

    表单重复提交问题1

    在Web开发中,表单重复提交是一个常见的问题,它可能会导致数据冗余或者不一致,尤其是在处理关键操作如交易、订单或用户注册时。这里我们深入探讨这个问题,并提供解决方案。 标题"表单重复提交问题1"所涉及的核心...

    防止表单重复提交

    然而,如果没有适当处理,可能会出现表单重复提交的问题,这可能导致数据的不一致性和服务器资源的浪费。本篇文章将深入探讨如何防止表单重复提交,主要关注于基于Struts2框架的解决方案。 首先,理解表单重复提交...

    [Jsp]防止页面表单重复提交的解决方法

    本篇文章将探讨如何有效地防止JSP页面中的表单重复提交,确保系统的稳定性和数据的准确性。 一、理解表单重复提交的问题 当用户点击提交按钮后,由于网络延迟或浏览器刷新等原因,可能导致同一份表单数据多次发送...

    Struts之Token解决表单那重复提交

    表单重复提交可能发生在用户点击提交按钮后,由于网络延迟或刷新页面等原因,导致请求被多次发送到服务器。如果不加以控制,可能会导致同一份数据被处理多次,从而对数据库造成不必要的影响。 二、Token机制的原理 ...

    几种防止表单重复提交的方法

    几种防止表单重复提交的方法 禁掉提交按钮。表单提交后使用Javascript使提交按钮disable。这种方法防止心急的用户多次点击按钮。但有个问题,如果客户端把Javascript给禁止掉,这种方法就无效了。 我之前的文章曾说...

    ASP.NET中防止刷新页面造成表单重复提交

    ### ASP.NET中防止刷新页面造成表单重复提交 在Web应用程序开发中,特别是在使用ASP.NET进行网站构建时,一个常见的问题是表单重复提交。这通常发生在用户通过按下浏览器的F5键来刷新页面的情况下,此时之前的表单...

    防止用户重复提交表单的方法和组件.rar

    好友使用vue技术封装了一个专门用于提交表单和下载文件的“防抖按钮”,其实现原理和使用方法看这里 https://blog.csdn.net/PursueExcellence/article/details/103903139。

Global site tag (gtag.js) - Google Analytics