Вопрос по asp.net, javascript – Отключить кнопку при отправке формы

15

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

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

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

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

Ваш Ответ

16   ответов
14

Дай вихрь:

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() );
    }
}
Отличный код, в итоге я сделал метод расширения для всех моих кнопок. public static void DisableButtonOnClick (эта кнопка ButtonControl, строка ClientFunction) BigBlondeViking
спасибо RP это выглядит потрясающе. Brownie
Вау! Вы хотите быть программистом корпоративного уровня! :) Adhip Gupta
Я не осел ... но писать так много кода вместо onsubmit = "this.button.disable = true" или что-то в этом роде в теге <form> - это немного ... странно? : | Ionuț Staicu
50 строк кода на стороне сервера, необходимых для достижения тонкости на стороне клиента? Нет, спасибо! Josh Stodola
17

к выглядит мое окончательное решение.

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>
+ 1. Приятное прикосновение с сообщением «Обработка ...» Amr H. Abd Elmajeed
отличный код! drogon
5

которая, как правило, ненадежна. Просто используйте «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;
    }
Здесь много хороших ответов, но этот прекрасный. Sean
2

рка не пройдена, она должна вернуть false до этого.

Однако подход JavaScript не является чем-то, на что можно положиться, поэтому у вас должно быть что-то, чтобы обнаружить дубликаты и на сервере.

2

отключите кнопку. если нет, то не надо.

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

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


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

Не только предотвращает двойную отправку, но для пользователя это явный индикатор того, что вы не хотите, чтобы кнопка была нажата более одного раза.

Это хороший MGOwen
... хотя я предпочитаю использовать атрибут OnClientClick, а не выделенный код. MGOwen
... а тебе не нужно, чтобы он не исчезал, если проверка на стороне клиента не удалась? MGOwen
0

поможет ли это, но в форме есть событие onsmit. Вы можете использовать это событие всякий раз, когда форма отправляется (с любой кнопки или элементов управления). Для справки:http: //www.htmlcodetutorial.com/forms/_FORM_onSubmit.htm

0

В обработчике нажатия кнопки первым делом нужно проверить это число, если оно не равно 1, просто выйти из функции.

0

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

0

но похожий метод, чем то, что @ Р. предложил:

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" />
0

что подход 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);
}
0

в отношении удобства использования) способ состоит в том, чтобы отключить кнопку с помощью атрибута OnClientClick, выполнить проверку на стороне клиента, а затем использовать полученный результат для продолжения или повторного включения кнопки. .

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

0

добавить скрипт в 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 Aslam

0

asp: Button>, вот так:

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

И функция JavaScript «enableBack ()» выглядит следующим образом:

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

Так, когда кнопка нажата, она отключается на 3 секунды. Если форма публикуется успешно, вы никогда не увидите кнопку повторного включения. Однако, если какие-либо валидаторы не сработали, кнопка снова станет активной через 3 секунды.

Все это, просто установив атрибут на кнопке - код JavaScript не нужно писать вручную.

Это было бы здорово - но в моей версии ASP.NET его нет. Какую версию ты используешь! MGOwen
Я использовал последнюю версию на тот момент: Visual Studio 2008. Я больше не работаю на этого работодателя, поэтому я не могу проверить что-либо еще (пакеты обновления, версию .NET и т. Д.). Извините за задержку с ответом! Steve J
Теперь, когда я об этом думаю, я думаю, что страница использовала AJAX, так что, возможно, это было расширение, предоставленное инструментарием. Steve J
0

раузерной опцией. Chrome не отправит форму, если вы просто используетеOnClientClick="this.disabled=true;"
Below - это решение, которое я тестировал в 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» с помощью события click для кнопки отправки формы, одним из способов которого является:

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

Стоит отметить, что это решает проблему отключения кнопки, если проверка на стороне клиента не удалась. Также не требует обработки на стороне сервера.

0

чтобы вызвать пользовательскую функцию и либо отправить и отключить в случае успеха, либо «остановить» при ошибке:

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

Похожие вопросы