04.01.2025

Como Desabilitar o Botão de Submissão do Formulário Após o Clique em JS

Resposta Rápida

Para evitar envios duplicados em rápida sucessão, aplique o seguinte código na propriedade onclick do botão. Isso desabilitará o botão e mudará imediatamente seu rótulo para informar aos usuários que a ação está em andamento:

<button onclick="this.disabled=true;this.value='Enviando…';return false;">Enviar</button>

Esse método garante que o formulário não seja reenviado e evita que ele seja enviado automaticamente.

Explicação Detalhada: Gerenciando Estados do Botão

É importante considerar vários estados do botão. Por exemplo, exiba o texto "Enviando…" enquanto os dados estão sendo enviados, para que os usuários entendam que o processo está acontecendo em segundo plano.

onClick="this.value='Enviando…';this.disabled=true;"

Integridade dos Dados: Não Perdidos Quando Desabilitados

Desabilitar elementos de formulário pode levar à perda de dados importantes durante a submissão. Para preservar as informações, é recomendável usar campos ocultos dentro do formulário.

<input type="hidden" id="buttonData" name="buttonData" value="Enviar">

Compatibilidade entre Navegadores: Versatilidade é Fundamental

Lembre-se de que diferentes navegadores podem interpretar JavaScript e HTML de maneira diferente. Desenvolva soluções universais.

Tratamento de Exceções: Erro de Submissão

Caso a submissão do formulário falhe, pode ser útil permitir que o usuário tente novamente usando a função setTimeout para reativar o botão.

setTimeout(() => { button.disabled = false; }, 3000);

Usando onsubmit: Um Gerenciador de Formulário Confiável

Para evitar envios duplicados, utilize o evento onsubmit; ele monitora diferentes métodos de submissão do formulário, incluindo pressionar a tecla Enter.

form.onsubmit = function(){ submitBtn.disabled = true; };

Mantendo Acessibilidade: Considerando o Conforto do Usuário

É crucial comunicar as mudanças de estado do botão usando tecnologias acessíveis, o que melhora a experiência do usuário.

Evitar Perda de Dados: Desabilitação Consciente

Antes de desabilitar o botão, avalie o impacto dessa ação na integridade dos dados e considere soluções alternativas usando JavaScript.

form.onsubmit = function(e) { e.preventDefault(); /* código adicional */ };

Visualização

Abaixo está um exemplo de visualização da mudança de estado do botão de envio:

Antes do Clique: [🚉 Botão de Enviar ✅]

document.getElementById("submitBtn").addEventListener("click", function() {
   this.disabled = true;
   this.value = 'Enviando…';
   setTimeout(() => this.form.submit(), 100);
   return false;
});

Após o Clique: [🚉 Botão de Enviar ❌ (Usado)]

Validação do Formulário: Validação Correta

Certifique-se de que todos os campos do formulário estejam preenchidos corretamente antes da submissão, utilizando o atributo required.

Indicação de Processo: Informação de Submissão

Ajude o usuário a entender o processo de espera usando indicadores apropriados.

button.value = 'Enviando... Por favor, aguarde!';

Tratamento Elegante de Erros: Restauração da Funcionalidade

Reative o botão se ocorrer um erro durante a submissão.

catch(err) { button.disabled = false; }

Aprimore as Interações com CSS: Interatividade do Usuário

Use CSS para implementar interações mais sofisticadas com o botão—como usar a propriedade pointer-events.

button[disabled] { pointer-events: none; }

Recursos Úteis

1. Evento onsubmit — Aprenda a arte de gerenciar formulários com o evento onsubmit.
2. Atributo disabled do botão HTML — Domine o uso do atributo disabled para gerenciar estados do botão.
3. pointer-events - CSS — Familiarize-se com o uso de pointer-events para melhorar as interações do usuário.
4. Debouncing e Throttling — Aprenda a controlar a frequência do manuseio de eventos para melhor desempenho.
5. jQuery.ajax() — Melhore os processos de submissão de formulários via AJAX usando jQuery.
6. Validação de Formulários do Lado do Cliente — Aprenda a realizar a validação do lado do cliente para prevenir erros antes da submissão.

Video

Navigation