Home » HTML, CSS e Javascript » Desabilitar botão submit ao enviar um formulário HTML com Jquery

2

Quando fazemos algum formulário HTML, muitas vezes, ao enviar esse formulário, nosso sistema vai fazer alguma rotina mais demorada (como por exemplo enviar um e-mail via smtp). Esse tipo de demora deve ser evitada porque causa um problema com usuários impacientes. Quando há uma pequena demora, nosso tão querido e amado usuário acaba clicando no botão enviar freneticamente.

Este tipo de usuário pode acabar enviando as mesmas informações várias vezes em seu sistema e isso causa duplicidade de informação desnecessária, principalmente quando estas informações vão para um banco de dados, por exemplo.

Este problema pode ser evitado desabilitando o botão submit quando ele é clicado. Funciona assim: O seu usuário preenche o formulário e ao clicar no botão submit o mesmo irá desativar o botão, evitando que o usuário clique novamente, e enviando o formulário normalmente.

Como a maioria dos meus projetos utilizo a biblioteca Jquery, resolvi criar um código onde não precisaria fazer grandes alterações. Basicamente ele verifica se existe algum botão de submit com uma determinada classe e adiciona uma rotina no evento click. Este evento desativa o botão e envia o formulário. Vamos ao código.

E em seu formulário basta colocar a class no button submit. Veja um exemplo:

Bem simples não é? Só que tem um porém. Em meus testes isso não funcionou no navegador Chrome. Nele o botão simplesmente é desativado e o formulário não é enviado.

Inicialmente, minha ideia para resolver este problema foi passando o ID do formulário e chamando um $(“#id-form”).submit() só que ai, em uma página com mais de um formulário eu teria que ficar replicando o trecho de código para cada formulário. Eu preferi em meu código simplificar ao máximo para evitar codificação duplicada e reaproveitar mais o script.

A solução que cheguei foi descobrindo o formulário pai deste botão. Assim poderia ter mais de um formulário em uma mesma página e resolver meu problema desabilitando o botão submit de uma forma bem melhor. Agora o código ficou assim:

A linha que foi adicionada foi a linha 10. Nela eu pego o elemento pai do botão submit que seja uma tag form (pega o primeiro que achar – form:first) e envio o formulário.

Pronto! Com este código você desabilita o botão submit dos seus formulários com uma rotina simples em Jquery.

Você já teve problemas com usuários enviando um formulário freneticamente? Deixe um comentário e caso tenha alguma sugestão de outras formas de desativar o botão submit não deixe de comentar.

 

Cadastre seu e-mail para receber as novidades do blog

2 Comentários

  1. Thiago disse:

    Muito bom seu script. Era o que eu tava precisando, porém surgiu um outro probleminha. Meu formulário tem campos com validação, então, ao clicar no botão, o mesmo desabilita porém não envia o formulário se algum campo validado estiver incorreto. O problema é que nessa situação, mesmo corrigindo os dados do campos inválido, o botão permanece desabilitado. Poderia me ajudar? Fico grato!

    • Rodrigo Maia disse:

      Olá Thiago, para resolver seu problema você tem que trabalhar com o seguinte trecho

      $(‘.btn-submit’).attr({
      disabled: false
      });

      Você deve chamar o trecho de código acima caso existe campos inválidos.

Deixe um comentário