禁用表單提交按鈕

Question

我有一個按鈕，當表單提交以防止用戶多次提交時，我想禁用該按鈕。

我曾嘗試過使用javascript onclick禁用該按鈕，但如果客戶端驗證失敗，該按鈕仍處於禁用狀態。

當表單成功提交時，不僅當用戶點擊時，如何禁用按鈕？

這是一個ASP.NET表單，因此如果可能的話，我想很好地與asp.net ajax頁面生命週期掛鉤。

Answer 1

給這個一掄：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Threading; 

public partial class _Default : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 

     // Identify button as a "disabled-when-clicked" button... 
     WebHelpers.DisableButtonOnClick(buttonTest, "showPleaseWait"); 
    } 

    protected void buttonTest_Click(object sender, EventArgs e) 
    { 
     // Emulate a server-side process to demo the disabled button during 
     // postback. 
     Thread.Sleep(5000); 
    } 
} 



using System; 
using System.Web; 
using System.Web.UI.WebControls; 
using System.Text; 

public class WebHelpers 
{ 
    // 
    // Disable button with no secondary JavaScript function call. 
    // 
    public static void DisableButtonOnClick(Button ButtonControl) 
    { 
     DisableButtonOnClick(ButtonControl, string.Empty);  
    } 

    // 
    // Disable button with a JavaScript function call. 
    // 
    public static void DisableButtonOnClick(Button ButtonControl, string ClientFunction) 
    { 
     StringBuilder sb = new StringBuilder(128); 

     // If the page has ASP.NET validators on it, this code ensures the 
     // page validates before continuing. 
     sb.Append("if (typeof(Page_ClientValidate) == 'function') { "); 
     sb.Append("if (! Page_ClientValidate()) { return false; } } "); 

     // Disable this button. 
     sb.Append("this.disabled = true;"); 

     // If a secondary JavaScript function has been provided, and if it can be found, 
     // call it. Note the name of the JavaScript function to call should be passed without 
     // parens. 
     if (! String.IsNullOrEmpty(ClientFunction)) 
     { 
      sb.AppendFormat("if (typeof({0}) == 'function') {{ {0}() }};", ClientFunction); 
     } 

     // GetPostBackEventReference() obtains a reference to a client-side script function 
     // that causes the server to post back to the page (ie this causes the server-side part 
     // of the "click" to be performed). 
     sb.Append(ButtonControl.Page.ClientScript.GetPostBackEventReference(ButtonControl) + ";"); 

     // Add the JavaScript created a code to be executed when the button is clicked. 
     ButtonControl.Attributes.Add("onclick", sb.ToString()); 
    } 
} 

Answer 2

禁用提交處理程序最後的按鈕。如果驗證失敗，它應該在此之前返回false。

但是，JavaScript方法不是可以依賴的，所以你應該有一些東西來檢測服務器上的重複。

Answer 3

不確定這是否有幫助，但是在表單中有onsubmit事件。無論何時表單提交（從任何按鈕或控件），您都可以使用此事件。 供參考：http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html

Answer 4

以下功能是有用的，不需要禁用部分往往是不可靠的。只需使用「return check_submit（）;」作爲提交按鈕的onclick處理程序的一部分。

還應該有一個隱藏的字段來保存form_submitted初始值爲0;

<input type="hidden" name="form_submitted" value="0"> 

function check_submit(){ 
      if (document.Form1.form_submitted.value == 1){ 
       alert("Don't submit twice. Please wait."); 
       return false; 
      } 
      else{ 
       document.Form1.form_submitted.value = 1; 
       return true; 
      } 
      return false; 
    } 

Answer 5

一個解決方案將設置一個隱藏字段單擊該按鈕時，數字1

點擊按鈕處理程序的第一件事就是檢查這個數字如果是1以外的其他只是退出功能。

Answer 6

您也可以利用窗體上可用的onsubmit（）javascript事件。此事件在表單實際提交時觸發，並且在驗證完成後不應陷入。

Answer 7

如果驗證成功，然後禁用按鈕。如果不是，那麼不要。

function validate(form) { 
    // perform validation here 
    if (isValid) { 
    form.mySubmitButton.disabled = true; 
    return true; 
    } else { 
    return false; 
    } 
} 

<form onsubmit="return validate(this);">...</form> 

Answer 8

這比什麼rp已經建議了一種更方便，但類似的方法：

function submit(button) { 
     Page_ClientValidate(); 
     if(Page_IsValid) 
     { 
      button.disabled = true; 
     } 
} 

<asp:Button runat="server" ID="btnSubmit" OnClick="btnSubmit_OnClick" OnClientClick="submit(this)" Text="Submit Me" /> 

Answer 9

設置按鈕爲「無」的知名度;

btnSubmit.Attributes("onClick") = document.getElementById('btnName').style.display = 'none';

它不僅阻止了雙重提交，而且它對用戶來說是一個明確的指示器，您不希望該按鈕被按下多次。

Answer 10

我不是在代碼隱藏中編寫所有javascript的巨大粉絲。這是我最終的解決方案。

按鈕：

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" OnClientClick="doSubmit(this)" /> 

的Javascript：

<script type="text/javascript"><!-- 
function doSubmit(btnSubmit) { 
    if (typeof(Page_ClientValidate) == 'function' && Page_ClientValidate() == false) { 
     return false; 
    }  
    btnSubmit.disabled = 'disabled'; 
    btnSubmit.value = 'Processing. This may take several minutes...'; 
    <%= ClientScript.GetPostBackEventReference(btnSubmit, string.Empty) %>;  
} 
//--> 
</script> 

Answer 11

剛聽到一個< ASP的 「DisableOnSubmit」 屬性：按鈕>，就像這樣：

<asp:Button ID="submit" runat="server" Text="Save" 
    OnClick="yourClickEvent" DisableOnSubmit="true" /> 

呈現時，按鈕的onclick屬性如下所示：

onclick="this.disabled=true; setTimeout('enableBack()', 3000); 
    WebForm_DoPostBackWithOptions(new 
    WebForm_PostBackOptions('yourControlsName', '', true, '', '', false, true)) 

與「enableBack（）JavaScript函數如下：

function enableBack() 
{ 
    document.getElementById('yourControlsName').disabled=false; 
} 

所以單擊該按鈕時，它成爲3秒禁用。如果表單發佈成功，那麼您永遠不會看到該按鈕重新啓用。但是，如果任何驗證器失敗，那麼該按鈕會在3秒後再次啓用。

所有這一切只需在按鈕上設置一個屬性 - 無需手動編寫javascript代碼。

Answer 12

請注意，如果您使用的按鈕爲UseSubmitBehavior="false"，則rp的方法將雙倍提交表單。

我用的RP的代碼如下變化：

public static void DisableButtonOnClick(Button button, string clientFunction) 
{ 
    // If the page has ASP.NET validators on it, this code ensures the 
    // page validates before continuing. 
    string script = "if (typeof(Page_ClientValidate) == 'function') { " 
      + "if (!Page_ClientValidate()) { return false; } } "; 

    // disable the button 
    script += "this.disabled = true; "; 

    // If a secondary JavaScript function has been provided, and if it can be found, call it. 
    // Note the name of the JavaScript function to call should be passed without parens. 
    if (!string.IsNullOrEmpty(clientFunction)) 
     script += string.Format("if (typeof({0}) == 'function') {{ {0}() }} ", clientFunction); 

    // only need to post back if button is using submit behaviour 
    if (button.UseSubmitBehavior) 
     script += button.Page.GetPostBackEventReference(button) + "; "; 

    button.Attributes.Add("onclick", script); 
} 

Answer 13

正確的（只要用戶友好方面，至少）的方法是禁止使用的OnClientClick屬性按鈕，在客戶端執行進行驗證，然後使用該結果繼續或重新啓用該按鈕。

當然，您還應該爲此編寫服務器端代碼，因爲即使由於缺少JavaScript或特定的實現，您也不能依賴驗證。但是，如果您依賴服務器控制按鈕的啓用/禁用狀態，那麼您基本上無法阻止用戶多次提交表單。出於這個原因，您應該有一些邏輯來在短時間內檢測來自同一用戶的多個提交（例如，來自同一個Session的相同值）。

Answer 14

我的解決辦法之一是如下：

添加在您的aspx文件

HtmlGenericControl includeMyJava = new HtmlGenericControl("script"); 
    includeMyJava.Attributes.Add("type", "text/javascript"); 
    includeMyJava.InnerHtml = "\nfunction dsbButton(button) {"; 
    includeMyJava.InnerHtml += "\nPage_ClientValidate();"; 
    includeMyJava.InnerHtml += "\nif(Page_IsValid)"; 
    includeMyJava.InnerHtml += "\n{"; 
    includeMyJava.InnerHtml += "\nbutton.disabled = true;"; 
    includeMyJava.InnerHtml += "}"; 
    includeMyJava.InnerHtml += "\n}"; 
    this.Page.Header.Controls.Add(includeMyJava); 

的Page_Load中的腳本，然後設置你的ASPX按鈕參數如下：

<asp:Button ID="send" runat="server" UseSubmitBehavior="false" OnClientClick="dsbButton(this);" Text="Send" OnClick="send_Click" /> 

請注意，「onClientClick」有助於禁用按鈕，「UseSubmitBehaviour」禁用傳統的頁面提交行爲，並允許asp.net在用戶呈現提交行爲腳本。

好運

-Waqas阿斯拉姆

Answer 15

所以，簡單地通過javascript禁用按鈕是不是跨瀏覽器兼容的選項。Chrome將不會提交表單，如果你只是用OnClientClick="this.disabled=true;"
下面是我在Firefox 9已測試的解決方案時，Internet Explorer 9和Chrome 16：

<script type="text/javascript"> 
var buttonToDisable; 
function disableButton(sender) 
{ 
    buttonToDisable=sender; 
    setTimeout('if(Page_IsValid==true)buttonToDisable.disabled=true;', 10); 
} 
</script> 

然後註冊「disableButton」用的單擊事件您的表單提交按鈕，一路幸福：

<asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClientClick="disableButton(this);" /> 

值得注意的是，得到周圍的按鈕的問題，如果客戶端驗證失敗被禁用。也不需要服務器端處理。 。

Answer 16

大廈@ RP的回答，我修改它來調用自定義功能，無論是在錯誤提交和禁用成功或「叫停」：

public static void DisableButtonOnClick(Button ButtonControl, string ClientFunction) 
{ 
    StringBuilder sb = new StringBuilder(128); 

    if (!String.IsNullOrEmpty(ClientFunction)) 
    { 
     sb.AppendFormat("if (typeof({0}) == 'function') {{ if ({0}()) {{ {1}; this.disabled=true; return true; }} else {{ return false; }} }};", ClientFunction, ButtonControl.Page.ClientScript.GetPostBackEventReference(ButtonControl, null)); 
    } 
    else 
    { 
     sb.Append("return true;"); 
    } 

    ButtonControl.Attributes.Add("onclick", sb.ToString()); 
}