2008-09-05 43 views
9

詳情:(客戶端)禁用提交按鈕的最佳方法是什麼?

  • 只有用戶點擊提交按鈕後關閉,但回發到服務器
  • ASP.NET Web表單(.NET 1.1)之前
  • 體型的jQuery(如有庫在所有)
  • 如果必須重新加載形式(即信用卡未能啓用)

這不是必須的,我這樣做,但如果有一個簡單的方法來做到這一點,而不必改變太多, 我會做的。 (即,如果沒有一個簡單的解決辦法,我可能不會做,所以不用擔心挖得太深)

回答

11

對於所有提交按鈕,通過JQuery ,這將會是:

$('input[type=submit]').click(function() { this.disabled = true; }); 

或者,它可能是在表單提交這樣做更有用的:

$('form').submit(function() { 
    $('input[type=submit]', this).attr("disabled","disabled"); 
}); 

但我認爲我們可以如果我們更瞭解上下文,可以更好地回答你的問題。

如果這是一個ajax請求,那麼您需要確保在成功或失敗時再次啓用提交按鈕。

如果這是一個標準的HTTP表單提交(除了使用JavaScript禁用按鈕),並且您正在通過多個提交的相同表單進行安全防護,那麼您應該在代碼中進行某種控制處理提交的數據,因爲使用JavaScript禁用按鈕可能不會阻止多次提交。

1

在JQuery的:

$('#SubmitButtonID').click(function() { this.disabled = true; }); 
0

有三種方法可以提交應該覆蓋的表單。同時使用David McLaughlin和Jimmy的建議。一個將禁用提交按鈕表單元素,而另一個則禁用基本的HTML表單提交。

第三,這些不會禁用Javascript做一個form.submit()。 OnSubmit="return false"方法僅適用於用戶單擊提交按鈕或在輸入表單元素中按Enter鍵。客戶端腳本也需要處理。

4

我猜你不希望他們在處理提交時多次點擊提交按鈕。

我的方法是完全隱藏按鈕,而不是顯示某種狀態指示器(動畫gif等)。

這裏是一個非常牽強的例子(它在技術上的原型,但我認爲一個jQuery版本將是非常相似):

<html> 
    <head> 
     <script type="text/javascript" src="include/js/prototype.js"></script> 

     <script type="text/javascript"> 
      function handleSubmit() 
      { 
       $('submit').hide(); 
       $('progressWheel').show(); 
       return true; 
      } 
     </script> 
    </head> 
    <body> 
     <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/> 
     <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/> 
    </body> 
</html> 
+0

+1很有幫助,因爲我需要通過請求發佈的提交按鈕值。禁用該按鈕意味着該值不會被髮布。 – ajbeaven 2011-12-23 03:51:34

0

如何

後面的代碼

btnContinue3。屬性。項目(「點擊」)=「disableSubmit()」

的Javascript

function disableSubmit() { 
    document.getElementById('btnContinue3').onclick = function() { 
     alert('Please only click once on the submit button!'); return false; 
    }; 
} 

這並不解決了會發生什麼問題,如果回發超時,但比它爲我工作等。

1

要注意的一點是,在提交表單之前,您不應該禁用該按鈕。如果您在OnClick事件中使用JavaScript禁用該按鈕,則可能會失去表單提交。

所以我建議你通過在上面放置圖像或通過將按鈕移出可見範圍來隱藏使用javascript的按鈕。這應該允許表單提交正常進行。

8

你可以做這樣的事情:這

$('form').submit(function() { 
    $(this) 
     .find(":submit,:image")    // get all the submit buttons 
     .attr({ disabled : 'disabled' }) // disable them 
     .end()        // go back to this form 
     .submit(function() {    // change the onsubmit to always reject. 
      return false; 
     }) 
    ; 
}); 

優點:

  • 它將與所有形式的工作,與提交的所有方法:
    • 點擊提交元件
    • 按下輸入,或者
    • 調用form.submit()從一些其他的代碼
  • 將禁用所有提交內容:
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • 這是非常短的。
相關問題