Neste artigo você vai aprender a como prevenir submit de formulário com JavaScript, ou seja, impedir que formulário seja enviado com JavaScript
Fala programador(a), beleza? Bora aprender mais sobre envio de formulários e também sobre JavaScript!
Podemos mapear o evento de click do botão de submit do formulário, inserindo um evento nele
Em eventos de click temos acesso a um objeto, o event
Ele possui alguns métodos e propriedade que nos ajudam a trabalhar melhor com o evento em si
Vamos precisar invocar o método preventDefault, este método é o responsável para parar a execução do formulário que é o evento nativo do HTML
Veja um exemplo prático da situação acima:
<form action=""> <input type="text" name="name"> <input type="submit" id="submit" value="Enviar"> </form>
Este será o nosso HTML de referência, vamos agora ao JS:
const btn = document.querySelector("#submit");
btn.addEventListener("click", function(e) {
e.preventDefault();
console.log("Insira aqui seu código!");
});Primeiramente selecionamos o botão de submit, e então criamos um evento de click nele
Neste evento resgatamos o parâmetro event, chamado de e (forma resumida, mas dá no mesmo)
Invocamos o método preventDefault dele, ou seja, o form não é mais enviado como normalmente
E então onde há o console.log podemos inserir o código que precisamos para executar a lógica da nossa aplicação
O JavaScript será executado normalmente, como se não houvesse o envio do formulário
Conclusão
Neste artigo você aprendeu a como prevenir submit de formulário com JavaScript, ou seja, parar o envio do form com JS
Utilizamos um objeto chamado event, que vem no evento click
E deste objeto invocamos o método preventDefault, que para o envio padrão de formulário do HTML, assim resolvendo nosso problema
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!