Bienvenidos sean a este post, hoy hablaremos sobre dos eventos relacionados directamente con los formularios y a sus dos acciones como son submit y reset, la primera es la carga del formulario y la segunda es la anulacion de los datos cargados en el mismo. para entender mejor el concepto veamos el siguiente ejemplo:
<html>
<head>
<title>Pagina de eventos de Formularios</title>
<script language="javascript">
<!--
function form_submit()
{
var usuario=document.miForm.usuario.value;
var nombre=document.miForm.nombre.value;
var apellido=document.miForm.apellido.value;
var texto;
texto="Usuario: " + usuario + "\n";
texto+="Nombre: " + nombre + "\n";
texto+="Apellido: " + apellido;
alert(texto);
}
function form_reset()
{
alert("Se hizo el reseteo del formulario");
}
//-->
</script>
</head>
<body>
<form name="miForm" method="post" action="" onSubmit="form_submit()" onReset="form_reset()">
<table border="0" cellpadding="0" cellspacing="0" width="400">
<tr>
<td width="50%"> Ingrese un usuario:</td>
<td width="50%"> <input type="text" name="usuario" id="usuario" value=""></td>
</tr>
<tr>
<td> Ingrese el nombre:</td>
<td> <input type="text" name="nombre" id="nombre" value=""></td>
</tr>
<tr>
<td> Ingrese el apellido:</td>
<td> <input type="text" name="apellido" id="apellido" value=""></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td align="right"><input type="submit" value="Subir"> </td>
<td> <input type="reset" value="Resetear"></td>
</tr>
</table>
</form>
</body>
</html>Este ejemplo es simple pero primero hablemos sobre el codigo HTML, para este caso debemos usar un FORM y veamos la linea donde se crea:
<form name="miForm" method="post" action="" onSubmit="form_submit()" onReset="form_reset()">En este caso le asignaremos un nombre, luego el metodo de tipo post, la accion la dejamos vacia y dos eventos uno para el onSubmit donde llamara a la funcion form_submit y otra para el onReset donde llamara a la funcion form_reset, en este formulario a su vez se ingresaran tres datos: uno para el usuario, otro para el nombre y el ultimo para el apellido, por ultimo tendremos dos botones, uno de tipo submit para cargar el formulario y otro de tipo reset para resetear el mismo, a su vez la estructura esta contenida en una tabla para darle un mejor formato, pasemos a hablar sobre el codigo de Javascript.
En este caso tendremos dos funciones, la primera es form_submit, donde crearemos cuatro variables, la primera guardara el valor del elemento usuario, el segundo contendra el valor del elemento nombre, la tercer variable almacenara el valor de apellido y por ultimo uno llamado texto, esta ultima variable la usaremos para crear un mensaje de texto donde le pasaremos los valores antes almacenados en cada una de las variables y por ultimo mostraremos a texto por medio de un alert. La siguiente funcion, form_reset, nos mostrara un mensaje de notificacion de que se va a resetear el formulario, grabemoslo y probemos la pagina como se ve en el siguiente video
Este es un caso simple pero podemos observar como ambos eventos fueron interceptados y se le asigno funciones extras a las que ya ejecuta de por si, es muy util para verificar que los datos hayan sido ingresados correctamente por citar un ejemplo.
En resumen, hoy hemos visto dos eventos que son para las acciones de un formulario, hemos visto para que se usa, como funcionan y un ejemplo de como aplicarlo de forma practica, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 