Lic.

Gerardo Guadarrama Gonzlez

Utilidades bsicas para formularios

Obtener el valor de los campos de formulario
La mayora de tcnicas JavaScript relacionadas con
los formularios requieren leer y/o modificar el valor
de los campos del formulario. Por tanto, a
continuacin se muestra cmo obtener el valor de los
campos de formulario ms utilizados.

Cuadro de texto y textarea

El valor del texto mostrado por estos elementos se
obtiene y se establece directamente mediante la
propiedad value.
<input type="text" id="texto" />
var valor = document.getElementById("texto").value;

Radiobutton
Cuando se dispone de un grupo de radiobuttons,
generalmente no se quiere obtener el valor del
atributo value de alguno de ellos, sino que lo
importante es conocer cul de todos los radiobuttons
se ha seleccionado. La propiedad checked devuelve
true para el radiobutton seleccionado y false en
cualquier otro caso.
<input type="radio" value="si" name="pregunta"
id="pregunta_si"/> SI
<input type="radio" value="no" name="pregunta"
id="pregunta_no"/> NO
<input type="radio" value="nsnc" name="pregunta"
id="pregunta_nsnc"/> NS/NC

El siguiente cdigo permite determinar si cada

radiobutton ha sido seleccionado o no:
var elementos =
document.getElementsByName("pregunta");
for(var i=0; i<elementos.length; i++) {
alert(" Elemento: " + elementos[i].value + "\n
Seleccionado: " +
elementos[i].checked);
}

Checkbox
Los elementos de tipo checkbox son muy similares a
los radiobutton, salvo que en este caso se debe
comprobar cada checkbox de forma independiente
del resto. El motivo es que los grupos de radiobutton
son mutuamente excluyentes y slo se puede
seleccionar uno de ellos cada vez.
Por su parte, los checkbox se pueden seleccionar de
forma independiente respecto de los dems.

Si se dispone de los siguientes checkbox:

<input type="checkbox" value="condiciones"
name="condiciones" id="condiciones"/> He
ledo y acepto las condiciones
<input type="checkbox" value="privacidad"
name="privacidad" id="privacidad"/> He ledola
poltica de privacidad

Utilizando la propiedad checked, es posible

comprobar si cada checkbox ha sido seleccionado
var elemento =
document.getElementById("condiciones");
alert(" Elemento: " + elemento.value + "\n
Seleccionado: " + elemento.checked);
elemento = document.getElementById("privacidad");
alert(" Elemento: " + elemento.value + "\n
Seleccionado: " + elemento.checked);

Select
Las listas desplegables (<select>) son los elementos
en los que es ms difcil obtener su valor. Si se
dispone de una lista desplegable como la siguiente:
<select id="opciones" name="opciones">
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
<option value="4">Cuarto valor</option>
</select>

En general, lo que se requiere es obtener el valor del

atributo value de la opcin (<option>) seleccionada por el
usuario. Obtener este valor no es sencillo, ya que se
deben realizar una serie de pasos.
options, es un array creado automticamente por el
navegador para cada lista desplegable y que contiene la
referencia a todas las opciones de esa lista. De esta forma,
la primera opcin de una lista se puede obtener mediante
document.getElementById("id_de_la_lista").options[0]
selectedIndex, cuando el usuario selecciona una opcin, el
navegador actualiza automticamente el valor de esta
propiedad, que guarda el ndice de la opcin seleccionada.
El ndice hace referencia al array options creado
automticamente por el navegador para cada lista

// Obtener la referencia a la lista

var lista = document.getElementById("opciones");
// Obtener el ndice de la opcin que se ha seleccionado
var indiceSeleccionado = lista.selectedIndex;
// Con el ndice y el array "options", obtener la opcin
seleccionada
var
opcionSeleccionada
=
lista.options[indiceSeleccionado];
// Obtener el valor y el texto de la opcin seleccionada
var textoSeleccionado = opcionSeleccionada.text;
var valorSeleccionado = opcionSeleccionada.value;
alert("Opcin seleccionada: " + textoSeleccionado + "\n
Valor de la opcin: " + valorSeleccionado);

Establecer el foco en un elemento

En programacin, cuando un elemento est
seleccionado y se puede escribir directamente en el
o se puede modificar alguna de sus propiedades, se
dice que tiene el foco del programa.
<form id="formulario" action="#">
<input type="text" id="primero" />
</form>
document.getElementById(" primero ").focus();

*Ejemplo 22
Genere un formulario donde aplique las diversas
verificaciones de los campos revisadas anteriormente
usando javascript.

Evitar el envo duplicado de un formulario

Uno de los problemas habituales con el uso de formularios
web es la posibilidad de que el usuario pulse dos veces
seguidas sobre el botn "Enviar". Si la conexin del
usuario es demasiado lenta o la respuesta del servidor se
hace esperar, el formulario original sigue mostrndose en
el navegador y por ese motivo, el usuario tiene la
tentacin de volver a pinchar sobre el botn de "Enviar".

<form id="formulario" action="#">

...
<input
type="button"
value="Enviar"
onclick="this.disabled=true;
this.value=Enviando...; this.form.submit()" />
</form>

*Ejemplo 23
<form id="formulario" action="#">
...<br>
<input
type="button"
value="Enviar"
onclick='this.disabled=true;this.value="Enviando...";t
his.form.submit()' />
</form>

Restringir los caracteres

cuadro de texto

permitidos

en un

*Ejercicio 24
Gener una funcin que reciba por parametros

Validacin
La principal utilidad de JavaScript en el manejo de los
formularios es la validacin de los datos introducidos por
los usuarios. Antes de enviar un formulario al servidor, se
recomienda validar mediante JavaScript los datos
insertados por el usuario. De esta forma, si el usuario ha
cometido algn error al rellenar el formulario, se le puede
notificar de forma instantnea, sin necesidad de esperar la
respuesta del servidor.
Aunque existen tantas posibles comprobaciones como
elementos
de
formulario
diferentes,
algunas
comprobaciones son muy habituales: que se rellene un
campo obligatorio, que se seleccione el valor de una lista
desplegable, que la fecha introducida sea lgica, que se
haya introducido un nmero donde as se requiere, etc.

*Ejemplo 25
Cree un formulario en donde tenga los elementos
bsicos (caja de texto, opciones, combos), y verifique
que no se haga el envo si uno de los elemento esta
vaco.

Objeto window
Define la ventana sobre la que estamos trabajando e incluye los objetos
referentes a la barra de tareas, el documento o la secuencia de direcciones
de la ltima sesin.
El nombre ser el que queramos que se utilize como parmetro de un
TARGET y las propiedades son una lista separada por comas de algunos de
los siguientes elementos:
toolbar[=yes|no]
location[=yes|no]
directories[=yes|no]
status[=yes|no]
menubar[=yes|no]
scrollbars[=yes|no]
resizable[=yes|no]
width=pixels
height=pixels

*Ejemplo 26
<SCRIPT LANGUAGE="JavaScript">
function AbrirVentana() {
MiVentana=open("","MiPropiaVentana",
"toolbar=no,directories=no,menubar=no,status=yes");
MiVentana.document.write( "<HEAD><TITLE>Una nueva
ventana</TITLE></HEAD>");
MiVentana.document.write("<CENTER><H1><B>" + Texto dentro de
nueva ventana</B></H1></CENTER>");
}
</SCRIPT>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton1" VALUE="Abreme, Ssamo"
onClick="AbrirVentana()">
</FORM>
</BODY>

close() Cierra la ventana. A no ser que hayamos

acabado de abrirla nosotros mostrar al usuario una
ventana de confirmacin para que decida l si quiere
o no cerrarla. Esto se hace por motivos de seguridad,
ya que sera demasiado fcil hacer un script de esos
mal intencionados que nos cerrase la ventana del
navegador, con lo que fastidia eso.
alert(mensaje) Muestra una ventana de dilogo con
el mensaje especificado.

confirm(mensaje) Muestra una ventana de dilogo

con el mensaje especificado y dos botones. Si el
usuario pulsa OK, el mtodo devuelve true. Si, en
cambio, pulsa Cancelar, devolver false.
prompt(mensaje,
sugerencia)
Muestra
una
ventana de dilogo con el mensaje especificado y un
campo de texto en el que el usuario pueda teclear,
cuyo valor inicial ser igual a sugerencia. Si el
usuario pulsa OK, el mtodo devuelve la cadena
introducida en el campo de texto. Si, por el contrario,
pulsa Cancelar, devolver el valor null.

Para nombrar o hacer referencia a un objeto window

se pueden utilizar varias tcnicas:
Por el nombre de la variable a la que se asign en
la apertura.
Por ejemplo:
...
nuevaVentana=window.open( "url","nombre_target","
parametros" ); ... ...
nuevaVentana.document.write("Escribiendo en la
nueva ventana"); ...
self o window es la ventana actual de cada
navegador en cada caso.

window.opener corresponde a la ventana padre

desde la que se abri una nueva ventana.
*Ejemplo 27
Despus de abrir una ventana con el mtodo
window.open, pasar a travs de esta un parmetro a
la ventana padre.

Frames
Frames es un objeto que, a pesar de pertenecer a
window, posee muchas de sus propiedades y
mtodos. De hecho, la nica diferencia entre un
marco y una ventana es su visualizacin
Javascript considera el documento de declaracin de
marcos (es decir, aquel en el que escribimos las
etiquetas FRAME y FRAMESET) como un objeto
Window normal y corriente.

Si en nuestro documento estuviera la siguiente lnea:

<FRAME NAME="principal" SRC="MiPagina.html">
Podramos acceder a su objeto Window por medio de
la referencia window.frames["principal"].
A su vez, desde el documento "hijo", es decir, desde
el documento que est encerrado en un marco,
podemos acceder al padre por medio de la referencia
parent. Tambin podemos acceder al documento que
est arriba del todo en esta jerarqua por medio de
top. Por ejemplo:
window == window.top

*Ejemplo28
Pgina principal:
<iframe src="ejercicio28a.html"
></iframe>
<br />
<iframe src="ejercicio28b.html"
></iframe>

name="frame1"

name="frame2"

*Ejemplo28
Pgina con el Frame 1:
<form name="form1">
<input type="text" name="Nombre" size="40">
<input type="button" value="Escibe tu nombre y da click"
onClick="parent.frame2.document.form1.nombre.value=d
ocument.form1.Nombre.value;">
</form>
Pgina con el Frame 2:
<form name="form1">
<input type="text" name="nombre" size="40">
</form>

Temporizador
var variable_de_temporizador =
setTimeout( instrucciones, tiempo, parametros );
clearTimeout( variable_de_temporizador );
El parmetro instrucciones con que se llama al mtodo
setTimeout() inidica la(s) accin(es) que se ha(n) de
ejecutar cuando se cumpla el tiempo prefijado. La
segunda es dicho tiempo expresado en milisegundos. En
caso de que dichas acciones a realizar sean la llamada a
una funcin, en el tercer parmetro se le puede pasar el
conjunto de argumentos que necesitar (en forma de
cadena). No obstante, los argumentos se pueden pasar
directamente en la propia llamada a la funcin, por lo que
solo son obligatorios al llamar a setTimeout() los dos
primeros parmetros.

Ejemplo 29
<HTML>
<HEAD> <TITLE>Primer ejemplo de uso de
temporizadores</TITLE>
<SCRIPT> function mensaje()
{ setTimeout("alert('Este mensaje ha salido a los 5
segundos');",5000); } </SCRIPT> </HEAD>
<BODY onLoad="mensaje();">Ejercicio 29</BODY>
</HTML>

*Ejemplo 30
Uso de temporizadores avanzados