這篇文章主要介紹web開(kāi)發(fā)中圖片按鈕提交與表單重復(fù)提交的問(wèn)題分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)絡(luò)空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、永嘉網(wǎng)站維護(hù)、網(wǎng)站推廣。

很多情況下為了美化表單都會(huì)把提交按鈕改成用一個(gè)圖片來(lái)代替。但如果沒(méi)有注意細(xì)節(jié)的話會(huì)造成表單的重復(fù)提交，導(dǎo)致一些莫名其妙的錯(cuò)誤，例如重復(fù)插入數(shù)據(jù)庫(kù)記錄之類的。
我們看以下一段簡(jiǎn)單的表單代碼：

代碼如下:

<form id="loginform" name="loginform" action="/tupian/20230522/404.html name="imagesubmit" />
</form>

這段代碼是正確的，不會(huì)有重復(fù)提交的問(wèn)題。“<input type="image">”其實(shí)和“<input type="SUBMIT">”起到的作用是相同的，一點(diǎn)那個(gè)圖片就會(huì)執(zhí)行submit()操作。
但有的人不放心，畫(huà)蛇添足的給image加了個(gè)onclick動(dòng)作，代碼如：

代碼如下:

<form id="loginform" name="loginform" action="/tupian/20230522/404.html name="imagesubmit" />
</form>

這下子點(diǎn)一次圖片按鈕就提交兩次了，重復(fù)提交由此產(chǎn)生。其功能就相當(dāng)于：

代碼如下:

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

當(dāng)然是不對(duì)的了。
如果一定要用onclick事件的話，可以用<img>來(lái)替代<input type="image">，如下也是可以正常工作的代碼：

代碼如下:

<form id="loginform" name="loginform" action="/tupian/20230522/404.html name="imagesubmit" />
</form>

本人就是遇到這個(gè)陰溝里翻船的問(wèn)題，導(dǎo)致用戶登錄時(shí)提交的圖形驗(yàn)證碼怎么都不對(duì)。想想，用戶都提交兩次了，第二次提交時(shí)驗(yàn)證碼還能對(duì)嗎？
2. 圖片按鈕如何禁止重復(fù)提交？

代碼如下:

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

這樣的按鈕如何禁止重復(fù)提交呢？
解決方案：

代碼如下:

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

采用這種方式可以避免使用圖片按鈕的重復(fù)提交
但現(xiàn)在有三個(gè)這樣的按鈕在一起，我想按其中一個(gè)后，所有三個(gè)都不能再提交了。
解決方案：

代碼如下:

<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" >
此圖片會(huì)自動(dòng)對(duì)Form表單進(jìn)行提交，即為type="submit" 若提交前要進(jìn)行判斷、檢驗(yàn)則用

代碼如下:

<input type="image" src="xxx.gif" onclick="return dosubmit();">

但是用這種方式提交會(huì)發(fā)生表單提交兩次的現(xiàn)象，經(jīng)常會(huì)造成表單元素被重復(fù)提交，數(shù)據(jù)庫(kù)被寫(xiě)入異常??！
尤其是用IE問(wèn)題比較嚴(yán)重，用火狐的話還不會(huì)報(bào)錯(cuò)！此時(shí)注意，要把數(shù)據(jù)庫(kù)設(shè)置為同一信息要！
原因：HTML 中 image的描述是“創(chuàng)建一個(gè)圖像控件，該控件單擊后將導(dǎo)致表單立即被提交”。
2.<img alt="提交" src="xxx.gif" onclick="return dosubmit();" style="cursor:pointer;">
這種方式提交是正常的沒(méi)有問(wèn)題， 效果和上面是一樣的。所以，請(qǐng)少用第一種方式提交數(shù)據(jù)尤其是在struts的應(yīng)用中
注意：css： cursor:hand只能被IE識(shí)別，火狐是不能識(shí)別的。而pointer則可以兼容！
注！無(wú)論哪種方式提交都在包含在<form></form>之間，否則，提交無(wú)效

以上是“web開(kāi)發(fā)中圖片按鈕提交與表單重復(fù)提交的問(wèn)題分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：web開(kāi)發(fā)中圖片按鈕提交與表單重復(fù)提交的問(wèn)題分析-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://www.rwnh.cn/article44/csicee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、品牌網(wǎng)站設(shè)計(jì)、自適應(yīng)網(wǎng)站、做網(wǎng)站、微信公眾號(hào)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)