El evento submit
Gestione el envío de formularios y evite las recargas.
El evento submit es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Envío de formularios
El evento submit se dispara cuando se envía un formulario, ya sea al hacer clic en un botón de envío o al presionar Enter en un campo. Es el lugar adecuado para gestionar los datos del formulario.
Escuchar en el formulario
Adjunte el listener al propio elemento form, no al botón de envío, para cubrir todas las formas de envío.
const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
console.log("submitting");
});La recarga predeterminada
De forma predeterminada, enviar un formulario navega a otra página o la recarga. En las aplicaciones controladas por JavaScript, normalmente se cancela este comportamiento.
form.addEventListener("submit", (e) => {
e.preventDefault();
});Por qué usar preventDefault aquí
Llamar a preventDefault mantiene la página en su lugar para que pueda validar y enviar los datos por su cuenta, a menudo mediante fetch.
form.addEventListener("submit", (e) => {
e.preventDefault();
const data = new FormData(form);
// send data without reloading
});Botones de envío
Un button con type="submit" (el valor predeterminado dentro de un formulario) activa el envío. Use type="button" en los botones que no deban enviar el formulario.
La tecla Enter envía el formulario
Al presionar Enter en un campo de texto de una sola línea se envía el formulario, por lo que es esencial escuchar en el formulario.
requestSubmit
form.requestSubmit envía el formulario mediante programación, pero sigue activando el evento submit y ejecutando la validación, a diferencia de form.submit, que omite ambas cosas.
form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the eventLeer datos al enviar
Dentro del controlador, cree un FormData a partir del formulario para recopilar de forma clara todos los campos con nombre.
form.addEventListener("submit", (e) => {
e.preventDefault();
const fd = new FormData(form);
const obj = Object.fromEntries(fd.entries());
console.log(obj);
});Desactivar el botón
Para evitar envíos duplicados, desactive el botón de envío mientras se procesa la solicitud y vuelva a activarlo al terminar.
form.addEventListener("submit", (e) => {
e.preventDefault();
const btn = form.querySelector("[type=submit]");
btn.disabled = true;
});Restablecer un formulario
form.reset borra los campos y los devuelve a sus valores predeterminados, y el evento reset permite reaccionar a esta acción.
form.addEventListener("reset", () => {
console.log("cleared");
});Elemento submitter
La propiedad submitter del evento submit indica qué botón lo activó, lo que resulta útil cuando un formulario tiene varios botones de envío.
form.addEventListener("submit", (e) => {
console.log(e.submitter && e.submitter.value);
});Comprobación rápida
Elija la práctica recomendada.
Resumen
Gestione los envíos mediante el evento submit del formulario y llame a preventDefault en las aplicaciones controladas por JavaScript. Escuche en el formulario (no en el botón) para capturar los envíos con la tecla Enter. Use FormData para leer los campos, requestSubmit para enviar mediante programación con validación y desactive el botón para evitar envíos duplicados.
Preguntas frecuentes
¿La lección «El evento submit» es gratis?
Sí — el texto completo de «El evento submit» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «El evento submit»?
Gestione el envío de formularios y evite las recargas. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «El evento submit»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.