Bienvenidos sean a este post, hoy hablaremos sobre un evento tambien relacionado con algunos elementos de los formularios porque es el encargado de interceptar todos los cambios que efectuemos sobre un elemento si miran la tabla de este post veran lo que les dije anteriormente.
Para entender mejor a este evento pasemos al siguiente ejemplo el cual sera similar al post anterior pero le haremos unas sutiles modificaciones:
<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 + "\n";
texto+="Sexo: " + document.miForm.sexo.value;
alert(texto);
}
function form_reset()
{
alert("Se hizo el reseteo del formulario");
}
function form_change(A)
{
switch(A)
{
case "uno":
alert("Se modifico el campo usuario");
break;
case "dos":
alert(document.miForm.sexo.value); break;
}
}
//-->
</script>
</head>
<body>
<form name="miForm" method="post" action="" onSubmit="form_submit()" onReset="form_reset()">
<table border="0" cellpadding="0" cellspacing="2" width="400">
<tr>
<td width="50%"> Ingrese un usuario:</td>
<td width="50%"><input type="text" name="usuario" id="usuario" value="" onChange="form_change('uno');"></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> Selecciona el sexo:</td>
<td>
<select name="sexo" id="sexo" onChange="form_change('dos');">
<option value="">--</option>
<option value="M">Masculino</option>
<option value="F">Femenino</option>
</select>
</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>En este caso tomamos el codigo de este post, y le hicimos sutiles diferencias para este caso le agregamos un onChange al elemento llamado usuario para que nos notifique cuando se modifique dicho campo para ello le decimos que ejecute la funcion form_change y le envia el valor uno, nuestra siguiente modificacion sera agregar un menu de lista o un elemento SELECT donde podremos elegir el sexo de la persona, en este caso tambien le agregaremos un evento onChange para llamar a la funcion form_change y enviara el valor dos, despues el resto es exactamente igual al caso anterior podemos pasar al codigo Javascript.
En este caso modificaremos a la funcion form_submit donde a texto le modificaremos esta linea:
texto+="Apellido: " + apellido + "\n";
En este caso le agregaremos un salto de linea para poder agregar la siguiente linea:
texto+="Sexo: " + document.miForm.sexo.value;
La cual sera la encargada de mostrar el valor del nuevo campo que agregamos, hablemos sobre la nueva funcion que agregaremos. En este caso hablamos de form_change la cual tiene la posibilidad de recibir un valor, esta la utilizaremos en un switch donde chequeara el valor que recibe, si es uno nos mostrara un mensaje que se modifico el campo usuario y si es dos nos mostrara el valor de sexo, grabemoslo y probemos para ver el resultado final como se observa en el siguiente video
En este ejemplo podemos ver como cuando se modifica el campo usuario nos muestra una notificacion, en cambio en los campos nombre y apellido no realiza ninguna accion pero cuando seleccionamos el sexo del usuario nos muestra cual fue seleccionado, si probamos de subir nos muestra todos los datos y ahora el nuevo campo que agregamos.
En resumen, hoy hemos visto el evento onChange, este es el encargado de monitorear los cambios sobre el elemento asignado, hemos visto cual es su tarea, como funciona y un breve ejemplo para ponerlo en practica, una aplicacion practica de este evento es por ejemplo para chequear al ingresar el usuario si este existe o no, 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 