Отключить кнопку при отправке формы

Question

У меня есть кнопка, которую я хотел бы отключить, когда форма отправляется, чтобы пользователь не отправлял несколько раз.

Я попытался наивно отключить кнопку с помощью javascript onclick, но если проверка на стороне клиента, которая не работает, кнопка остается отключенной.

Как отключить кнопку, когда форма успешно отправляется не только при нажатии пользователем?

Это форма ASP.NET, поэтому, если возможно, я хотел бы красиво подключиться к жизненному циклу asp.net asp.net.

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

Вы также можете воспользоваться событием javascript onsubmit(), которое доступно в формах. Это событие срабатывает, когда форма фактически отправляется и не должна ловить ловушку до тех пор, пока проверка не будет завершена.

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

Просто слышал о недвижимости "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

Обратите внимание, что подход rp удвоит отправку формы, если вы используете кнопки с UseSubmitBehavior="false".

Я использую следующий вариант кода 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, выполнить клиент -side validation, а затем используйте результат этого для продолжения или повторного включения кнопки.

Конечно, вы также должны написать код на стороне сервера для этого, так как вы не можете полагаться на проверку, даже выполняемую из-за недостатка или конкретной реализации JavaScript. Однако, если вы полагаетесь на сервер, контролирующий включенное/отключенное состояние кнопки, у вас в принципе нет возможности блокировать пользователя, отправляющего форму несколько раз в любом случае. По этой причине у вас должна быть некоторая логика для обнаружения нескольких представлений от одного и того же пользователя за короткий период времени (например, одинаковые значения из того же сеанса).

Answer 14

один из моего решения состоит в следующем:

добавить скрипт в Page_Load вашего 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); 

и затем установите параметры кнопки 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

здание на @ РПЭ в ответ, я изменил его, чтобы вызвать пользовательскую функцию и либо отправить и отключить на успех или «остановить» по ошибке:

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