Evilnapsis

Programming, Hacking and More

Web Development

[Javascript] Detener el comportamiento de un formulario

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


<!– 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>

view raw

f1-f1.html

hosted with ❤ by GitHub

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()


<!– 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>

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.

 

 

Agustin Ramos

Desarrollador de Software

Leave a Reply