[Javascript] Detener el comportamiento de un formulario

Detener el comportamiento de un formulario es muy util en javascript cuando vamos a hacer validaciones de campos o para usar Ajax.

💡 ¿Quieres aprender más? Este artículo es parte de nuestra Recopilación de Plugins JavaScript y jQuery → donde encontrarás más de 20 tutoriales gratuitos esperándote para llevar tus habilidades al siguiente nivel.

Controlar el comportamiento de un formulario es una habilidad esencial en JavaScript, especialmente cuando necesitamos realizar validaciones de campos antes de enviar los datos o cuando queremos procesar la información mediante Ajax sin recargar la página.

Tradicionalmente, un formulario tiene dos métodos de envío:

  • GET: Envía los datos a través de la URL (visible para el usuario).
  • POST: Envía los datos de manera interna en el cuerpo de la petición (más discreto).

Sin embargo, gracias a JavaScript, podemos interceptar estos métodos y decidir exactamente qué debe pasar.

Al momento de usar un formulario tenemos dos opciones de metodos, POST y GET, la diferencia es que GET envia los datos por la URL y POST envia los datos un poco mas discreto, pero podemos hacer que nuestro formulario haga lo que nosotros queramos.

Ejemplo 1: Detener el proceso por defecto

<!– Powered By https://evilnapsis.com/ –>
<form id="myform" method="post" action="process.php">
<input type="submit" value="Proceder">
</form>
<script type="text/javascript">
var form = document.getElementById("myform");
form.onsubmit = function(e){
alert("Hola!!");
e.preventDefault();
}
</script>
view raw f1-f1.html hosted with ❤ by GitHub

Explicación:

  1. Definimos un formulario estándar con el ID myform que apunta a process.php.
  2. Mediante un script, capturamos el evento onsubmit.
  3. Al activar la función, mostramos una alerta y ejecutamos e.preventDefault().
  4. Resultado: El formulario se detiene por completo y la redirección a la otra página nunca ocurre.

Ejemplo 2: Condicionar el e.preventDefault()

<!– Powered By https://evilnapsis.com/ –>
<form id="myform" method="post" action="process.php">
<input type="submit" value="Proceder">
</form>
<script type="text/javascript">
var form = document.getElementById("myform");
form.onsubmit = function(e){
var respuesta = confirm("Deseas continuar ?");
if(respuesta){
}else{
alert("Detenido!!");
e.preventDefault();
}
}
</script>
view raw f1-f2.html hosted with ❤ by GitHub

En este ejemplo que es muy similar al anterior usamos un mensaje de confirmacion para saber si el usuario quiere continuar o no, por lo que si el usuario no quiere continuar entonces se llama al metodo e.preventDefault() que detiene el comportamiento del formulario.

Conclusion

Les invito a que desarrollen sus propias pruebas y si no conocian el funcionamiento de e.preventDefault() ahora ya lo pueden conocer.

Estos articulos de javascript como podran ir viendo seran usados como referencia mas adelante que veamos temas un poco mas complicados.

Les invito a que se suscriban a este blog y reciban notificaciones por email cada vez que publique nuevos articulos.

¿Necesitas un software de ventas listo para producción?

Inventio Max es la solución profesional con soporte para múltiples almacenes, reportes avanzados y gestión de usuarios.

Ver Inventio Max – Sistema de Inventario y Ventas Profesional →

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Discover more from Evilnapsis

Subscribe now to keep reading and get access to the full archive.

Continue reading