防止表單重復提交，通常會通過attachEvent在 form的onsubmit事件中寫一個方法，每次觸發該事件時執行該方法，可以給form增加一個submited屬性，每次判斷這個屬性，為 false時繼續提交表單并且設置form.submited=true，不則拒絕重復提交。

這樣會存在一些問題：提交表單一般有三種方式

submit按鈕

當form中只有一個文本本框按回車的時候

自己寫腳本提交

前兩種是可以觸發 onsubmit事件的，但是第三種不會。

因此，僅靠捕獲onsubmit事件時不行的，還必須在form的submit方法執行前，判斷表單是否在提交。

來看下面的代碼：

復制代碼 代碼示例:

function $setFormCheckSubmited(){

var frms=document.forms;

for(var i=0;i

{

frms[i].baseSubmit=frms[i].submit;//保存表單原來的submit 方法

frms[i].submited=false;//添加一個submited屬性，并且設置其為false

frms[i].submit=new Function("$submitForm(this)");

$addElementEventHandler(frms[i],"onsubmit","$submitForm(document.forms["+i+"])");

}

}

//提交一個表單，如果當前表單已經提交，按么就不會繼續提交該表單

function $submitForm(frm)

{

if (frm.submited) return false;

frm.submited=true;

frm.baseSubmit();

}

//下面是addElementEventHandler的實現

/*

添加一個方法到到一個對象的一個的一個事件中

element 要設置的對象

eventName 事件名稱， 字符串類型的。

methodName表示函數名稱，字符串類型的。

*/

function $addElementEventHandler(element,eventName,methodName)

{

if (document.all)

{

element.attachEvent(eventName,new Function(methodName));

}

else

{

if (eventName.substring(0,2)=="on") eventName=eventName.substring(2);//firefox中所有的事件名稱前面是沒有on的。

element.addEventListener(eventName,new Function(methodName));

}

}

完整的例子如下：

復制代碼 代碼示例:

防止表單重復提交_www.jquerycn.cn

function CheckUserName(){

if (document.FORM1.UserName.value == '' ){

alert('請輸入要注冊的會員!');

document.FORM1.UserName.focus();

return false;

}

document.FORM1.NextStep.disabled=true;

document.FORM1.NextStep.value='請稍后...'

return true;

}

新用戶注冊

第二步：設定用戶名

* 用戶名:

另一種實現方法：

復制代碼 代碼示例:

function formsubmit() {

Today = new Date();

var NowHour = Today.getHours();

var NowMinute = Today.getMinutes();

var NowSecond = Today.getSeconds();

var mysec = (NowHour*3600)+(NowMinute*60)+NowSecond;

if((mysec-document.formsubmitf.mypretime.value)>600){

//600只是一個時間值，就是5分鐘內禁止重復提交，值隨便設

document.formsubmitf.mypretime.value=mysec;

}

else{

alert(' 按一次就夠了，請勿重復提交！請耐心等待！謝謝合作！');

return false;

}

document.forms.formsubmitf.submit();

}

此方法的缺點：刷新一次，檢測就不起作用，好處就是利用JS檢測，不需要額外的權限支持。

解決問題的方法總是不止一種，哪個更適合你，哪個就是更好的，你說呢？

總結

以上是生活随笔為你收集整理的html怎么防止表单重复提交,js防止表单重复提交的解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。