botão Desactivar no envio do formulário

Question

Eu tenho um botão que eu gostaria de desativar quando os submete o formulário para evitar que o usuário submeter várias vezes.

Eu tentei, ingenuamente, desativando o botão com javascript onclick, mas, em seguida, se uma validação do lado do cliente que não o botão permanece desativado.

Como faço para desativar o botão quando o formulário envia com sucesso não apenas quando o usuário clica?

Esta é uma forma ASP.NET para que eu gostaria de ligar muito bem com o ciclo de vida página ajax asp.net se possível.

Answer 1

Dê este um giro:

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

Eu não sou um grande fã de escrever tudo o que javascript no código-behind. Aqui está o que os meus finais olhares solução semelhante.

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 3

A função seguinte é útil sem necessitar da parte incapacitante que tende a ser pouco fiáveis. uso apenas "check_submit retorno ();" como parte do manipulador onclick dos botões enviar.

Também deve haver um campo escondido para manter o valor inicial form_submitted de 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 4

Desativar o botão na parte final do seu manipulador de enviar. Se a validação falhar, ele deve retornar false antes disso.

No entanto, a abordagem JavaScript não é algo que pode ser invocado, por isso você deve ter algo para detectar duplicatas no servidor também.

Answer 5

Se a validação for bem sucedida, em seguida, desativar o botão. se não for, então não.

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

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

Answer 6

Definir a visibilidade no botão para 'none';

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

Não só impedir a apresentação dupla, mas é um indicador claro para o usuário que você não deseja que o botão pressionado mais de uma vez.

Answer 7

Não tenho certeza se isso vai ajudar, mas não há evento onsubmit no formulário. Você pode usar esse evento sempre que o formulário de envio (a partir de qualquer botão ou controles). Para referência: http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html

Answer 8

A solução será a de definir um campo oculto quando o botão é clicado, com o número 1.

Na primeira coisa manipulador de clique do botão é para verificar se o número se for algo diferente de 1 retornar apenas fora da função.

Answer 9

Você também pode ser capaz de tirar proveito do evento javascript onsubmit () que está disponível em formulários. Este evento é acionado quando o formulário é realmente submeter e não deve armadilha até depois da validação está completa.

Answer 10

Este é um método mais fácil, mas semelhante do que o que rp sugeriu:

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 11

Note que a abordagem de rp vai dobrar enviar seu formulário se você estiver usando botões com UseSubmitBehavior="false".

Eu uso o seguinte variação do código de 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 12

O correto (tanto quanto facilidade de uso está em causa, pelo menos) forma seria a de desativar o botão usando o atributo OnClientClick, executar a validação do lado do cliente, e então usar o resultado de que, para continuar ou reativar o botão.

É claro, você também deve código do lado do servidor de gravação para isso, como você não pode contar com a validação, mesmo sendo realizado devido a uma falta ou aplicação particular, de JavaScript. No entanto, se você confiar no servidor de controle do botão de ativado / estado desativado, então você tem basicamente nenhuma maneira de bloquear o usuário enviar o formulário várias vezes de qualquer maneira. Por esta razão, você deve ter algum tipo de lógica para detectar submissões múltiplas de um mesmo usuário em um curto período de tempo (valores idênticos da mesma sessão, por exemplo).

Answer 13

um dos minha solução é a seguinte:

adicionar o script no page_load do seu arquivo 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);

e, em seguida, definir os parâmetros de botão aspx como segue:

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

Note que "onClientClick" ajuda a desativar a tecla e "UseSubmitBehaviour" desabilita o comportamento submeter tradicional da página e permite asp.net para tornar o comportamento submeter sobre script de usuário.

boa sorte

-Waqas Aslam

Answer 14

Apenas ouviu falar sobre a propriedade "DisableOnSubmit" de um , assim:

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

Quando prestados, onclick aparência de atributos do botão assim:

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

E o "enableBack ()' olhares função JavaScript como este:

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

Assim, quando o botão é clicado, torna-se desativado durante 3 segundos. Se as mensagens de formulário com sucesso, então você nunca vê o botão de re-ativar. Se, no entanto, quaisquer validadores falhar, em seguida, o botão é ativado novamente depois de 3 segundos.

Tudo isso apenas definindo um atributo no botão -. Há necessidades código JavaScript para ser escrito à mão

Answer 15

Então simplesmente desabilitar o botão via javascript não é uma opção compatível cross-browser. Chrome não vai enviar o formulário se você usar apenas OnClientClick="this.disabled=true;"
Abaixo está uma solução que eu testei no Firefox 9, Internet Explorer 9 e Chrome 16:

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

Em seguida, registrar 'disableButton' com o evento clique do botão de envio do formulário, uma maneira de ser:

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

Vale notar que este fica em torno de seu problema do botão ser desativada se a validação do lado do cliente falhar. Também não requer processamento do lado do servidor.

Answer 16

.

Com base @ rp de resposta, eu modifiquei para invocar a função personalizada e quer enviar e desativar em caso de sucesso ou "parada" em caso de erro:

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