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 submit en javascript, 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:
//evento submit
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.
//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!
