O evento submit
Trate o envio de formulários e impeça recarregamentos.
O evento submit é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.
Enviando formulários
O evento submit é acionado quando um formulário é enviado, seja ao clicar em um botão de envio, seja ao pressionar Enter em um campo. Esse é o local adequado para processar os dados do formulário.
Ouvindo o form
Adicione o ouvinte ao próprio elemento form, não ao botão de envio, para abranger todas as formas de envio.
const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
console.log("submitting");
});A recarga padrão
Por padrão, o envio navega para outra página ou recarrega a página atual. Em aplicativos controlados por JavaScript, geralmente você cancela esse comportamento.
form.addEventListener("submit", (e) => {
e.preventDefault();
});Por que usar preventDefault aqui
Chamar preventDefault mantém a página no lugar para que você possa validar e enviar os dados por conta própria, geralmente usando fetch.
form.addEventListener("submit", (e) => {
e.preventDefault();
const data = new FormData(form);
// send data without reloading
});Botões de envio
Um button com type="submit" (o padrão dentro de um formulário) inicia o envio. Use type="button" para botões que não devem enviar o formulário.
A tecla Enter envia o formulário
Pressionar Enter em um campo de texto de uma única linha envia o formulário, e é por isso que é essencial ouvir o próprio formulário.
requestSubmit
form.requestSubmit envia o formulário programaticamente, mas ainda aciona o evento de envio e executa a validação, ao contrário de form.submit, que ignora ambos.
form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the eventLendo dados no envio
Dentro do manipulador, crie um FormData a partir do formulário para reunir de forma organizada todos os campos nomeados.
form.addEventListener("submit", (e) => {
e.preventDefault();
const fd = new FormData(form);
const obj = Object.fromEntries(fd.entries());
console.log(obj);
});Desativando o botão
Para evitar o envio duplicado, desative o botão de envio durante o processamento e reative-o quando terminar.
form.addEventListener("submit", (e) => {
e.preventDefault();
const btn = form.querySelector("[type=submit]");
btn.disabled = true;
});Redefinindo um form
form.reset limpa os campos e os restaura para seus valores padrão, e o evento reset permite que você reaja a isso.
form.addEventListener("reset", () => {
console.log("cleared");
});Elemento que enviou o formulário
A propriedade submitter do evento de envio informa qual botão o acionou, o que é útil quando um formulário tem vários botões de envio.
form.addEventListener("submit", (e) => {
console.log(e.submitter && e.submitter.value);
});Verificação rápida
Escolha a melhor prática.
Resumo
Trate os envios com o evento submit do formulário, chamando preventDefault em aplicativos controlados por JS. Ouça o formulário, não o botão, para capturar envios pela tecla Enter. Use FormData para ler os campos, requestSubmit para enviar programaticamente com validação e desative o botão para evitar envios duplicados.
Perguntas Frequentes
A aula “O evento submit” é grátis?
Sim — o texto completo de “O evento submit” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.
O que vou aprender em “O evento submit”?
Trate o envio de formulários e impeça recarregamentos. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “O evento submit”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de JavaScript Academy?
Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.