`

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

阅读更多

 

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

 

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

<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>

 

 

 

 

分享到:
评论

相关推荐

    使用 dom4j 解析 XML(转)_jackey

    博文链接:https://qsfwy.iteye.com/blog/219588

    利用apache的proxy-ajp做apache与tomcat的结合(转载) jackey

    在某些场景下,为了整合两者的优点,我们会利用Apache的`mod_proxy_ajp`模块来实现Apache与Tomcat的结合,以提高系统性能和负载均衡能力。下面将详细介绍这一过程。 `mod_proxy_ajp`是Apache HTTP服务器的一个模块...

    jackey:Jack 元数据属性定义

    杰基Jackey (jack-key) 是一个简单的仅定义标头,用作 Jack 元数据属性键的临时标准。 使用单个标头进行这种协调可以很容易地发现、使用和扩展 Jack 客户端使用的密钥。 没有必要使用这个标头,因为键是由它们的 URI...

    ssc_lead_acid_battery_simulink电池_sae_simulinkbattery_铅酸蓄电池_铅酸电池模

    这个例子展示了一种高压电池,类似于混合动力汽车中使用的电池...有关定义方程及其验证,请参见Jackey,R.“电气系统部件选择的简单有效铅酸蓄电池建模过程”,SAE世界大会与展览会,2007年4月,参考文献2007-01-0778。

    js+jquery组图片切换效果

    2. **手动触发切换**:除了自动切换外,还可以添加按钮让用户手动切换图片。 3. **无限轮播**:通过修改`switchImage`函数,使其在到达最后一张图片后返回到第一张,实现无限轮播效果。 4. **预加载图片**:为了避免...

    Office百宝箱 v29.0 【Excel、Word、PPT、Outlook、Publisher、VBA编程、办公必备插件】

    图片批量尺寸及嵌表格式导图、导入多行列图片具备18项可设置参数,多达80种组合导入方式,满足各行业不同需求的图片导入导出与规范排版。表达式计算精灵让数学函数及复杂公式表达式全自动计算一切变得那么轻巧与高效...

    Word万能百宝箱 v29.0 【办公插件 文字编辑 办公必备】

    功能面向文字处理、数据转换、编辑计算、整理排版、工程解密、段落加解密、插入特殊符号、繁简及内码转换、GB2转BIG5、BIG5转GB2、图片批量导入、图片批量导出、批量导图入表格、批量改图片大小、每页转图片文件、...

    WinCVS与CVSNT简明使用手则

    4. **签出与提交**:用户通过WinCVS图形界面进行代码签出、编辑、然后提交更改。 5. **版本追踪**:CVS会记录每次提交的版本,用户可以通过历史查看代码的变更。 **总结:** WinCVS与CVSNT的结合使用,为Windows ...

    图片捕捉工具

    在IT行业中,图片捕捉工具是开发者、设计师以及普通用户日常工作中不可或缺的一部分,特别是在Web开发领域。标题中的“图片捕捉工具”特指的是能够帮助用户快速、高效地捕获屏幕图像,并进行编辑、保存或分享的软件...

    JS图片+文字描述幻灯片特效

    在本项目中,“JS图片+文字描述幻灯片特效”是一个利用JavaScript实现的动态展示图片和对应文字描述的功能,通常应用于网站的首页或产品展示页面,以吸引用户注意力并提供信息。 幻灯片特效是一种常见的网页设计...

    CVSNT安装手册!!!!!!!!!!!!!!!!!!!

    - 本机上已存在的用户列表包括:Administrator(系统管理员)、Jackey、Goury、Riolee(均为普通用户)。 - **3.2 安装CVSNT** - 下载CVSNT-2.0.4。 - 使用administrator账户登录Server机器。 - 双击自解压的...

    WinCVS与CVSNT 使用简介.doc

    【WinCVS与CVSNT使用简介】 WinCVS与CVSNT是Windows环境下用于版本控制的工具,其中WinCVS是图形化的客户端界面,而CVSNT是服务器端的实现。本文主要针对Windows LAN环境下的新手,详细介绍如何配置和使用这两个...

    ssc_lead_acid_battery.zip_matlab例程_matlab__matlab例程_matlab_

    这个例子展示了一种高压电池,类似于混合动力汽车中使用的电池...有关定义方程及其验证,请参见Jackey,R.“电气系统部件选择的简单有效铅酸蓄电池建模过程”,SAE世界大会与展览会,2007年4月,参考文献2007-01-0778。

    浅谈ORACLE的SQLLDR

    #### 一、SQL Loader的特点与应用场景 ##### 特点概述 - **兼容性好**:SQL Loader是Oracle提供的一个非常实用的数据导入工具,能够处理不同格式的数据文件,并将其导入Oracle数据库。相较于EXP/IMP等其他工具,SQL...

Global site tag (gtag.js) - Google Analytics