Detener el comportamiento de un formulario es muy util cuando vamos a hacer validaciones de campos.
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– Powered By http://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> |
En las lineas 2,3 y 4 se define un formulario valido que cuenta de un boton de Proceder y normalmente al darle click el formulario nos deberia redirigir al archivo process.php, pero en las lineas 6-12 tenemos un script que obtiene el formulario por su id “myform” y modifica el evento onsubmit para que se muestre una alert y con e.preventDefault() se detenga el comportamiento por defecto y el formulario ya no redirija a ninguna parte.
Ejemplo 2: Condicionar el e.preventDefault()
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– Powered By http://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> |
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.