照片按钮递交与表单反复递交难题讨论

日期:2021-03-21 类型:科技新闻 

关键词:培训互动游戏h5,微信群互动大转盘,h5安全互动游戏,报名抽奖能互动的,微信互动游戏摇一摇

许多状况下以便清理表单都会把递交按钮改为用1个照片来替代。但假如沒有留意细节的话会导致表单的反复递交,致使1些无缘无故的不正确,比如反复插进数据信息库纪录之类的。
大家看下列1段简易的表单编码:

拷贝编码
编码以下:

<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">”起到的功效是同样的,1点那个照片就会实行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>

这下子点1次照片按钮就递交两次了,反复递交由此造成。其作用就非常于:

拷贝编码
编码以下:

<input type="SUBMIT" onclick="submit()">

自然是不对的了。
假如1定要用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次递交时认证码还能对吗?
2. 照片按钮怎样严禁反复递交?

拷贝编码
编码以下:

<input type="image" src="bt.gif" onclick="submit()">

这样的按钮怎样严禁反复递交呢?
处理计划方案:

拷贝编码
编码以下:

<input type="image" src="bt.gif" onclick="submit();this.disabled=true">

选用这类方法能够防止应用照片按钮的反复递交
但如今有3个这样的按钮在1起,我想按在其中1个后,全部3个都不可以再递交了。
处理计划方案:

拷贝编码
编码以下:

<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难题较为比较严重,用火狐的话还不容易出错!此时留意,要把数据信息库设定为同1信息内容要唯1!
缘故:HTML 中 image的叙述是“建立1个图象控制,该控制点击后将致使表单马上被递交”。
2.<img alt="递交" src="xxx.gif" onclick="return dosubmit();" style="cursor:pointer;">
这类方法递交是一切正常的沒有难题, 实际效果和上面是1样的。因此,请少用第1种方法递交数据信息特别是在struts的运用中
留意:css: cursor:hand只能被IE鉴别,火狐是不可以鉴别的。而pointer则能够适配!
注!不管哪样方法递交都在包括在<form></form>之间,不然,递交失效