15.03.2025

Enviando um Formulário ao Clicar em um Link Usando JavaScript

Resposta Rápida

Para enviar um formulário ao clicar em um link, você precisa impedir o comportamento padrão e ativar o método submit() para um formulário específico:

<a href="javascript:void(0);" id="submit-link">Enviar</a>
<form id="form-to-submit">
  <!-- Campos do formulário -->
</form>

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('submit-link').addEventListener('click', function(event) {
    event.preventDefault(); // Impede a ação padrão
    document.getElementById('form-to-submit').submit(); // Inicia o envio do formulário
  });
});

Esteja atento à compatibilidade com diversos navegadores e à possibilidade de conflitos com outros scripts na página.

Melhorando a Acessibilidade

Um link estilizado pode representar problemas de acessibilidade. Garanta que seu formulário seja adequado para todos os usuários. Elementos como input e select sempre exigem rótulos, enquanto links podem precisar de um papel de botão:

<a href="javascript:void(0);" id="submit-link" role="button">Enviar</a>

Se você quiser que um botão pareça um link e vice-versa, pode usar um elemento button com os estilos apropriados:

<button type="submit" id="submit-button" style="appearance: none; background: none; border: none;">
  Enviar
</button>

Enfrentando Tarefas Complexas

Formulários com Múltiplos Manipuladores de Evento

Se um formulário possui múltiplos manipuladores de evento submit, eles devem interagir corretamente. Em alguns casos, uma solução pode ser adicionar um botão de envio oculto:

<form id="form-to-submit">
  <input type="submit" style="display: none;" />
</form>

document.getElementById('submit-link').addEventListener('click', function() {
  document.getElementById('form-to-submit').querySelector('[type="submit"]').click(); // Inicia o clique no botão de envio
});

Compatibilidade com JavaScript e Frameworks

Ao integrar-se a outras bibliotecas e frameworks, tenha em mente suas peculiaridades. Por exemplo, o envio de um formulário em jQuery se parece com isso:

// Certifique-se de que o jQuery está pronto
$(document).ready(function() {
  $('#submit-link').click(function(e) {
    e.preventDefault();
    $(this).closest('form').submit(); 
  });
});

Visualização

Clicar no link (🔗) aciona uma função JavaScript. E aí está — o formulário foi enviado (🎯):

document.querySelector('#myLink').addEventListener('click', function() {
   document.querySelector('#myForm').submit();
});

Sucesso! 🎉

Sua ação: 🔗✔️
Envio do formulário: 🎯✔️

Estilização e Aparência do Link

O link para envio do formulário deve harmonizar com o estilo da página. Você pode usar CSS para adicionar efeitos:

#submit-link:hover {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}

Feedback Após o Envio

Após o envio do formulário, é essencial informar o usuário sobre o status de sua solicitação por meio de uma mensagem ou animação.

Recursos Úteis

1. HTMLFormElement: método submit() - Web API | MDN - Guia do MDN sobre como usar submit().
2. Como simular um clique no botão ao pressionar Enter - Interatividade com o teclado.
3. FormData - Trabalhando com FormData para AJAX.
4. Requisição POST em JavaScript como um envio de formulário - Stack Overflow - Discussão sobre envios de formulários usando JavaScript.
5. Uso adequado do elemento button | CSS-Tricks - Vantagens de usar o elemento <button>.
6. Elemento: evento de clique - Web API | MDN - Análise do evento de clique em JS.
7. Padrão HTML - Padrões oficiais de HTML para elementos de formulário.

Navigation