Qual é a melhor abordagem para desabilitar (no lado do cliente) um botão de envio?

StackOverflow https://stackoverflow.com/questions/46079

Pergunta

Detalhes:

  • Desativar somente depois que o usuário clicar no botão enviar, mas antes de postar de volta no servidor
  • Formulários da Web ASP.NET (.NET 1.1)
  • Prefira jQuery (se houver alguma biblioteca)
  • Deve ser ativado se o formulário for recarregado (ou seja,cartão de crédito falhou)

Não é uma necessidade que eu faça isso, mas se houver uma maneira simples de fazer isso sem ter que mudar muito, eu farei.(ou seja,se não houver uma solução simples, provavelmente não farei isso, então não se preocupe em cavar muito fundo)

Foi útil?

Solução

Para todos os botões de envio, via JQuery, seria:

$('input[type=submit]').click(function() { this.disabled = true; });

Ou pode ser mais útil fazê-lo no envio do formulário:

$('form').submit(function() {
    $('input[type=submit]', this).attr("disabled","disabled");
});

Mas acho que poderíamos dar uma resposta melhor à sua pergunta se soubéssemos um pouco mais sobre o contexto.

Se esta for uma solicitação ajax, você precisará ativar os botões de envio novamente em caso de sucesso ou falha.

Se este for um envio de formulário HTTP padrão (além de desabilitar o botão com javascript) e você estiver fazendo isso para proteger contra vários envios do mesmo formulário, então você deve ter algum tipo de controle no código que lida com o dados enviados, porque desabilitar um botão com javascript pode não impedir vários envios.

Outras dicas

Você poderia fazer algo assim:

$('form').submit(function() {
    $(this)
        .find(":submit,:image")             // get all the submit buttons
        .attr({ disabled : 'disabled' })    // disable them
        .end()                              // go back to this form
        .submit(function() {                // change the onsubmit to always reject.
            return false;
        })
    ;
});

Benefícios disso:

  • Funcionará com todos os seus formulários, com todos os métodos de envio:
    • clicando em um elemento de envio
    • pressionando enter ou
    • ligando form.submit() de algum outro código
  • Isso desativará todos os elementos de envio:
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • é muito curto.

Suponho que você não deseja que eles cliquem no botão enviar mais de uma vez enquanto o envio está sendo processado.

Minha abordagem foi apenas ocultar totalmente o botão e exibir algum tipo de indicador de status (gif animado, etc.).

Aqui está um exemplo muito inventado (está tecnicamente em protótipo, mas acho que uma versão jquery seria muito semelhante):

<html>
    <head>
        <script type="text/javascript" src="include/js/prototype.js"></script>

        <script type="text/javascript">
            function handleSubmit()
            {
                $('submit').hide();
                $('progressWheel').show();
                return true;
            }
        </script>
    </head>
    <body>
        <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
        <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
    </body>
</html>

em JQuery:

$('#SubmitButtonID').click(function() { this.disabled = true; });

O que você deve saber é que você não deve desativar o botão antes de o formulário ser enviado.Se você desabilitar o botão usando javascript no evento OnClick poderá perder o envio do formulário.

Então, eu sugiro que você oculte o botão usando javascript, colocando uma imagem acima dele ou movendo o botão para fora do alcance visível.Isso deve permitir que o envio do formulário prossiga normalmente.

Existem três maneiras de enviar um formulário que devem ser abordadas.Use as sugestões de David McLaughlin e Jimmy.Um desabilitará o elemento do formulário do botão de envio, enquanto o outro desabilitará o envio do formulário HTML básico.

Para o terceiro, isso não impedirá que o Javascript execute um form.submit().O OnSubmit="return false" O método só se aplica quando um usuário clica no botão enviar ou pressiona Enter em um elemento do formulário de entrada.Os scripts do lado do cliente também precisarão ser tratados.

Que tal

Código por trás:

btnContinue3.Attributes.Item("onclick") = "disableSubmit()"

JavaScript:

function disableSubmit() {
    document.getElementById('btnContinue3').onclick = function() { 
        alert('Please only click once on the submit button!'); return false;
    };
}

Isso não resolve o problema do que acontece se o postback expirar, mas fora isso funcionou para mim.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top