很多情况下为了美化表单都会把提交按钮改成用一个图片来代替。但如果没有注意细节的话会造成表单的重复提交,导致一些莫名其妙的错误,例如重复插入数据库记录之类的。
我们看以下一段简单的表单代码:
<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>
分享到:
相关推荐
博文链接:https://qsfwy.iteye.com/blog/219588
NULL 博文链接:https://qsfwy.iteye.com/blog/434614
杰基Jackey (jack-key) 是一个简单的仅定义标头,用作 Jack 元数据属性键的临时标准。 使用单个标头进行这种协调可以很容易地发现、使用和扩展 Jack 客户端使用的密钥。 没有必要使用这个标头,因为键是由它们的 URI...
这个例子展示了一种高压电池,类似于混合动力汽车中使用的电池...有关定义方程及其验证,请参见Jackey,R.“电气系统部件选择的简单有效铅酸蓄电池建模过程”,SAE世界大会与展览会,2007年4月,参考文献2007-01-0778。
Office_WPS_EXCEL万能百宝箱_官方正版合集V30.0(含教程)2020年的该资源包,为中汛软件科技Jackey.Liangrc荣誉出品的官方正版下载包,内容包括: Excel万能百宝箱V30.0、Excel万能百宝箱64位 V29.0 64Bit、WPS万能百宝...
图片批量尺寸及嵌表格式导图、导入多行列图片具备18项可设置参数,多达80种组合导入方式,满足各行业不同需求的图片导入导出与规范排版。表达式计算精灵让数学函数及复杂公式表达式全自动计算一切变得那么轻巧与高效...
功能面向文字处理、数据转换、编辑计算、整理排版、工程解密、段落加解密、插入特殊符号、繁简及内码转换、GB2转BIG5、BIG5转GB2、图片批量导入、图片批量导出、批量导图入表格、批量改图片大小、每页转图片文件、...
web开发必备又好用的图片截图捕捉工具web开发必备又好用的图片截图捕捉工具web开发必备又好用的图片截图捕捉工具
JS图片+文字描述幻灯片特效JS图片+文字描述幻灯片特效JS图片+文字描述幻灯片特效JS图片+文字描述幻灯片特效JS图片+文字描述幻灯片特效
这个例子展示了一种高压电池,类似于混合动力汽车中使用的电池...有关定义方程及其验证,请参见Jackey,R.“电气系统部件选择的简单有效铅酸蓄电池建模过程”,SAE世界大会与展览会,2007年4月,参考文献2007-01-0778。
js+jquery组图片切换效果
NULL 博文链接:https://jackey1979.iteye.com/blog/1171447
NULL 博文链接:https://jackey25.iteye.com/blog/854761
NULL 博文链接:https://jackey25.iteye.com/blog/749414
NULL 博文链接:https://jackey25.iteye.com/blog/730475
NULL 博文链接:https://jackey25.iteye.com/blog/834104
NULL 博文链接:https://jackey25.iteye.com/blog/728435