Control de Formas con JavaScript

Ahora toca ver cómo acceder a los valores de las formas usando JavaScript. Empecemos desde el principio.. Una Forma, está dentro de un documento, el cual puede contener varias formas. Cada forma a su vez, puede contener varias entradas. Asi es que al querer acceder al valor de un elemento de entrada de una forma de un documento, debemos hacer referencia al documento, luego a la forma y por último al elemento de entrada. Por ejemplo, para acceder a la única forma de un documento, y a su único elemento, podríamos escribir lo siguiente:

...
document.forms[0].elements[0]...(etc..)
...

Por supuesto que la línea de arriba no hace nada, pero quiero mostrar por dónde empezar. Primero se hace referencia al documento actual (document); luego a la primera forma; la número 0. Si tuviéramos 10 formas dentro de documento, la décima, llevaría el número nueve. Esto es, que nuestras formas se enumeran desde 0 hasta 9 (10 en total). Lo mismo sucede con los elementos de una forma. Habiendo N elementos, el enésimo elemento llevaría por número N-1.
Ahora algo un poco más práctico. Si tenemos un documento con una sola forma, y la forma estuviera declarada como sigue..

<FORM name="primera">
<INPUT type="text" name="uno" value="Roflo">
</FORM>

Aquí, podríamos hacer referencia al contenido del cuadro de texto de una de las siguientes formas:

...
document.forms[0].elements[0].value ...
ó
...
document.primera.uno.value ...

Puede verse que le damos un uso más al nombre del elemento de entrada. Ya que "forms[0]" es lo mismo que "primera". Ahora este valor, podemos utilizarlo en algo útil...

...
alert(document.forms[0].elements[0].value);
...

Después, declaramos una función que utilice esa llamada.. O podemos utilizar un botón que despliegue ese valor como 'alert'..

Los tipos de entrada, text, password y textarea obtienen su valor de la misma manera.
Sin embargo, un tipo de entrada como checkbox, no tiene un valor signficante que se pueda leer; lo que nos puede interesar es saber si está palomeado o no.

alert(document.forms[1].elements[0].checked);
---
Veamos ahora el ejemplo de una entrada de tipo Radio:

alert(document.forms[2].elements[0].checked); //Radio1
alert(document.forms[2].elements[1].checked); //Radio2
alert(document.forms[2].elements[2].checked); //Radio3

---

Para la entrada SELECT, las cosas son un poco distintas. El objeto select tiene objetos OPTION en él. Asi que primero necesitamos determinar cuál está seleccionado. El objeto SELECT, tiene una propiedad llamada selectedIndex, la cual regresa el número de la opción actualmente seleccionada. Y SELECT también tiene la propiedad (arreglo) options[]. De manera que podemos escribir:

document.forms[N].elements[M].options[selectedIndex]

En este ejemplo, N y M varían de acuerdo a la distribución del documento; pero en el caso del arreglo options[], se está haciendo referencia al objeto OPTION que esta actualmente seleccionado.
El objeto OPTION tiene una propiedad value, asi que podemos hacer:

document.forms[N].elements[M].options[selectedIndex].value

MUCHO OJO: El valor (value) de OPTION, es el que se declara como value="valor_de_option".. NO el que se pone fuera del TAG option. Ese se puede acceder con la propiedad text. Por ejemplo:

...
<SELECT>
<OPTION value="a">ABC
<OPTION value="x">XYZ
</SELECT>
...
document.forms[N].elements[M].options[selectedIndex].value
document.forms[N].elements[M].options[selectedIndex].text

El resto es tratar de encontrar la manera óptima de manejar el contenido de las formas. A continuación vamos a ver cómo funciona el ejemplo del dado!

Regresar

El link de esta lección es: http://flores-morones.net/geo/roflo1/HTML/JavaScript/forms.html (Se abre en toda la ventana).

<A href=../izq.html>Índice</A>