图片提交按钮与表单重复提交
2009年08月30日很多情况下为了美化表单都会把提交按钮改成用一个图片来代替。但如果没有注意细节的话会造成表单的重复提交，导致一些莫名其妙的错误，例如重复插入数据库记录之类的。
我们看以下一段简单的表单代码：
<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> |
本人就是遇到这个阴沟里翻船的问题，导致用户登录时提交的图形验证码怎么都不对。想想，用户都提交两次了，第二次提交时验证码还能对吗？
十二月 27th, 2009 at 下午 12:56
高手啊，十分感谢，帮了我一个大忙，去掉onclick这个事件是正解的啊。
十二月 30th, 2009 at 下午 4:38
博主用的是什么模板啊？真好看，支持你
十二月 31st, 2009 at 下午 6:21
我轻轻地来了，留了个脚印！