Tắt nút gửi biểu mẫu

Question

Tôi có một nút mà tôi muốn vô hiệu hóa khi biểu mẫu gửi để ngăn người dùng gửi nhiều lần.

Tôi đã cố gắng vô hiệu hóa việc vô hiệu hóa nút bằng javascript onclick nhưng sau đó nếu xác thực phía máy khách không thể tắt nút.

Làm cách nào để vô hiệu hóa nút khi biểu mẫu gửi thành công không chỉ khi người dùng nhấp?

Đây là biểu mẫu ASP.NET vì vậy tôi muốn kết nối độc đáo với vòng đời trang asp.net ajax nếu có thể.

Answer 1

này cung cấp cho một whirl:

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

Tắt nút ở cuối trình xử lý gửi của bạn. Nếu xác thực không thành công, nó sẽ trả về false trước đó.

Tuy nhiên, cách tiếp cận JavaScript không phải là thứ có thể dựa vào, vì vậy bạn cũng nên có một số thứ để phát hiện các bản sao trên máy chủ.

Answer 3

Không chắc chắn liệu điều này có hữu ích hay không, nhưng có sự kiện đang diễn ra trong biểu mẫu. Bạn có thể sử dụng sự kiện này bất cứ khi nào gửi biểu mẫu (từ bất kỳ nút hoặc điều khiển nào). Để tham khảo: http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html

Answer 4

Chức năng sau rất hữu ích mà không cần phần vô hiệu hóa có xu hướng không đáng tin cậy. Chỉ cần sử dụng "return check_submit();" như một phần của trình xử lý onclick của các nút gửi.

Cũng phải có một trường ẩn để giữ giá trị ban đầu được gửi bởi form_submitted là 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

Một giải pháp sẽ được để thiết lập một lĩnh vực tiềm ẩn khi nút được nhấn vào, với số 1.

Trên điều nút bấm điều khiển đầu tiên là để kiểm tra con số đó nếu nó là một cái gì đó khác hơn 1 chỉ cần quay trở lại chức năng.

Answer 6

Bạn cũng có thể tận dụng lợi thế của sự kiện javascript onsubmit() có sẵn trên biểu mẫu. Sự kiện này kích hoạt khi biểu mẫu thực sự gửi và không nên bẫy cho đến khi quá trình xác thực hoàn tất.

Answer 7

nếu xác nhận là thành công, sau đó tắt nút. nếu không, thì đừng.

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

Đây là một phương pháp dễ dàng hơn nhưng tương tự so với những gì rp đã gợi ý:

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

Đặt khả năng hiển thị vào nút để 'none';

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

Nó không chỉ ngăn chặn việc gửi đôi, mà còn là chỉ báo rõ ràng cho người dùng mà bạn không muốn nhấn nút nhiều lần.

Answer 10

Tôi không phải là một người hâm mộ lớn viết tất cả javascript đó trong đoạn mã sau. Đây là giải pháp cuối cùng của tôi.

Button:

<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

Chỉ cần nghe nói về "DisableOnSubmit" tài sản của một asp <: Nút >, như vậy:

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

Khi render , thuộc tính onclick của nút trông giống như sau:

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

Và "enableBack()' javascript chức năng trông như thế này:

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

Vì vậy, khi nút được nhấn vào, nó trở nên tàn tật trong 3 giây. Nếu biểu mẫu đăng thành công thì bạn sẽ không bao giờ thấy nút bật lại. Tuy nhiên, nếu bất kỳ trình xác thực nào không thành công thì nút sẽ được bật lại sau 3 giây.

Tất cả điều này chỉ bằng cách đặt thuộc tính trên nút - không cần mã javascript bằng tay.

Answer 12

Lưu ý rằng cách tiếp cận của rp sẽ tăng gấp đôi gửi biểu mẫu của bạn nếu bạn đang sử dụng các nút có UseSubmitBehavior="false".

tôi sử dụng biến thể mã sau đây rp của:

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

The (như xa như thân thiện với người có liên quan, ít nhất) cách chính xác sẽ được vô hiệu hóa các nút sử dụng thuộc tính OnClientClick, thực hiện các khách hàng xác nhận hợp lệ, và sau đó sử dụng kết quả của việc đó để tiếp tục hoặc kích hoạt lại nút.

Tất nhiên, bạn cũng nên viết mã phía máy chủ cho điều này, vì bạn không thể dựa vào việc xác thực ngay cả khi được thực hiện do thiếu hoặc triển khai cụ thể của JavaScript. Tuy nhiên, nếu bạn dựa vào máy chủ kiểm soát trạng thái bật/tắt của nút, thì về cơ bản bạn không có cách nào chặn người dùng gửi biểu mẫu nhiều lần. Vì lý do này, bạn nên có một số loại logic để phát hiện nhiều lần gửi từ cùng một người dùng trong một khoảng thời gian ngắn (ví dụ như các giá trị giống nhau từ cùng một phiên).

Answer 14

một trong những giải pháp của tôi là như sau:

thêm đoạn mã trong Page_Load của tập tin aspx của bạn

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); 

và sau đó thiết lập các thông số nút aspx của bạn như sau:

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

Lưu ý rằng "onClientClick" giúp vô hiệu hóa nút và "UseSubmitBehaviour" vô hiệu hóa hành vi gửi truyền thống của trang và cho phép asp.net hiển thị hành vi gửi khi người dùng kịch bản.

may mắn

-Waqas Aslam

Answer 15

Vì vậy, chỉ đơn giản là vô hiệu hóa các nút thông qua javascript không phải là một lựa chọn tương thích qua trình duyệt.Chrome sẽ không gửi biểu mẫu nếu bạn chỉ cần sử dụng OnClientClick="this.disabled=true;"
Dưới đây là một giải pháp mà tôi đã thử nghiệm trong Firefox 9, Internet Explorer 9 và Chrome 16:

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

Sau đó đăng ký 'disableButton' với sự kiện click của nút gửi biểu mẫu của bạn, một cách là:

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

Cần lưu ý rằng vấn đề này bị vô hiệu hóa nếu nút xác thực của khách hàng không thành công. Cũng không yêu cầu xử lý phía máy chủ. .

Answer 16

xây dựng trên @ rp của câu trả lời, tôi sửa đổi nó để gọi chức năng tùy chỉnh và đệ trình và vô hiệu hóa thành công hay "tạm dừng" về lỗi:

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()); 
}