Evento submit en JavaScript

Autor: | Última modificación: 18 de noviembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

JavaScript es un lenguaje de programación extenso y completo que nos permite ejecutar comportamientos sobre distintos elementos. Una de las maneras de ejecutar comportamientos en este lenguaje es a través de la escucha de eventos. En este post, te enseñaremos qué es y cómo funciona el evento submit en JavaScript, fundamental para controlar el comportamiento de tus formularios HTML.

¿Qué es el evento submit en JavaScript?

El evento submit en JavaScript, como su nombre indica, es un evento que podemos insertar dentro del método addEventListener. En este sentido, funciona de manera similar a otros eventos conocidos, como lo son click y DOMContentLoaded. Pero, ¿qué hace exactamente el evento submit? Pues la palabra submit en inglés se refiere a enviar. Entonces, este evento nos permite conocer cuándo se da el envío de un formulario.

Ten en cuenta que el envío de un formulario se puede dar con dos acciones: con un enter de teclado por parte del usuario o con un clic sobre un elemento button type submit en HTML.

Para conocer más sobre este evento, te recomendamos leer el artículo HTMLFormElement: submit event eb la página oficial de la Mozilla Developer Network.

¿Cómo funciona el evento submit en JavaScript?

Como te mencionábamos antes, el evento submit en JavaScript funciona de manera muy similar al evento click. Esto quiere decir que podemos insertar este evento como primer parámetro del método addEventListener, que nos permite determinar la reacción a un momento específico de nuestro proyecto, sea en la interacción de usuario o en la creación de una página HTML.

Entonces, para utilizar el evento submit en JavaScript, primero deberemos seleccionar al formulario HTML que hemos creado. Para ello, podemos usar cualquiera de los métodos para seleccionar nodos del DOM. A continuación, te mostramos cómo usamos el método querySelector y la etiqueta form para seleccionar nuestro formulario y añadirle un escuchador de evento:

document.querySelector (‘form’).addEventListener(‘submit’).

Ahora, el método addEventListener también recibe un segundo parámetro. Este segundo parámetro será una función (es decir, un callback) que determina la reacción que se debe ejecutar cuando este evento ocurra. A continuación, te mostramos cómo hacemos que un simple string se pinte en pantalla cuando ocurre el evento submit en JavaScript.

document.querySelector (‘form’).addEventListener (‘submit’, ( ) => {

console.log («HAGO UN SUBMIT»);

});

}

}

Las líneas de código anteriores nos permitirán probar, desde el inspector del navegador, si el envío del formulario se está ejecutando. Si es así, el string anterior deberá aparecer en la sección console.

Puede que cuando pruebes este código veas el string anterior por solo un milisegundo y después desaparezca de la consola. Esto se da por el comportamiento por defecto que tiene el formulario. Entonces, para evitar este comportamiento, deberemos ejecutar el método preventDefault sobre el evento que recibimos:

document.querySelector (‘form’).addEventListener (‘submit’, (event) => {

event.preventDefault ( );

console.log («HAGO UN SUBMIT»);

});

}

}

De esta manera, el comando anterior nos permite controlar el formulario con nuestro propio código JavaScript en vez de seguir el comportamiento por defecto de la etiqueta form.

¿Qué sigue?

Ahora que sabes qué es el evento submit en Javascript y cómo funciona, ¡te invitamos a seguir aprendiendo sobre este poderoso lenguaje de programación! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar todo tipo de proyectos con JavaScript, HTML, CSS y JSX. ¡No te lo pierdas y pide información para empezar a cambiar tu vida!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!