web开发中图片按钮提交与表单重复提交的问题分析

这篇文章主要介绍web开发中图片按钮提交与表单重复提交的问题分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

发展壮大离不开广大客户长期以来的信赖与支持,我们将始终秉承“诚信为本、服务至上”的服务理念,坚持“二合一”的优良服务模式,真诚服务每家企业,认真做好每个细节,不断完善自我,成就企业,实现共赢。行业涉及成都墙体彩绘等,在网站建设成都营销网站建设、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。

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

代码如下:




这段代码是正确的,不会有重复提交的问题。“”其实和“”起到的作用是相同的,一点那个图片就会执行submit()操作。
但有的人不放心,画蛇添足的给image加了个onclick动作,代码如:

代码如下:




这下子点一次图片按钮就提交两次了,重复提交由此产生。其功能就相当于:

代码如下:



当然是不对的了。
如果一定要用onclick事件的话,可以用来替代,如下也是可以正常工作的代码:

代码如下:




本人就是遇到这个阴沟里翻船的问题,导致用户登录时提交的图形验证码怎么都不对。想想,用户都提交两次了,第二次提交时验证码还能对吗?
2. 图片按钮如何禁止重复提交?

代码如下:



这样的按钮如何禁止重复提交呢?
解决方案:

代码如下:



采用这种方式可以避免使用图片按钮的重复提交
但现在有三个这样的按钮在一起,我想按其中一个后,所有三个都不能再提交了。
解决方案:

代码如下:








利用图片提交表单有两种方式:
1.
此图片会自动对Form表单进行提交,即为type="submit" 若提交前要进行判断、检验则用

代码如下:



但是用这种方式提交会发生表单提交两次的现象,经常会造成表单元素被重复提交,数据库被写入异常!!
尤其是用IE问题比较严重,用火狐的话还不会报错!此时注意,要把数据库设置为同一信息要唯一!
原因:HTML 中 image的描述是“创建一个图像控件,该控件单击后将导致表单立即被提交”。
2.提交
这种方式提交是正常的没有问题, 效果和上面是一样的。所以,请少用第一种方式提交数据尤其是在struts的应用中
注意:css: cursor:hand只能被IE识别,火狐是不能识别的。而pointer则可以兼容!
注!无论哪种方式提交都在包含在

之间,否则,提交无效

以上是“web开发中图片按钮提交与表单重复提交的问题分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网站标题:web开发中图片按钮提交与表单重复提交的问题分析
当前URL:http://bzwzjz.com/article/iephhs.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 定制网站建设 成都网站建设 成都响应式网站建设 成都网站建设公司 移动手机网站制作 高端网站设计 响应式网站设计方案 达州网站设计 网站建设推广 成都网站制作 响应式网站建设 成都响应式网站建设公司 成都品牌网站建设 网站建设方案 营销型网站建设 成都网站设计 成都网站设计 成都做网站建设公司 外贸网站设计方案 成都网站设计制作公司 网站设计制作 成都网站建设公司