formulario dinámico (IX)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Recogiendo valores.-

Está bien, me habéis pillado. En la página que estamos creando hay varios formularios, por lo que me diréis que a la hora de enviar los datos que ha introducido el usuario ¿cuál de ellos se envía?.

Muy astutos, y lleváis razón. Una forma general de resolver este problema sería establecer con JavaScript una variable global de tal forma que registrara constantemente qué formulario es el que ha rellenado el usuario. Pero vamos a rizar el rizo, sobre todo con vistas a posible ampliaciones de nuestra página.

Imaginaros que en vez de 3 formularios tenemos 10, y que se llega a ellos a través de varios niveles previos de selección. En este caso el método de la variable no sería el adecuado, porque intervendrían valores de varios formularios preliminares. ¿Y sí queremos mostrar entonces un formulario resumen de los datos totales que ha introducido nuestro visitante?.

Vamos pués a usar un método general, que nos permita actuar cómodamente en todas estas variantes al problema. Y para ello vamos a crear efectivamente un formulario resumen. Lo que pasa es que este formulario puede ser visible o invisible al usuario. En nuestra página, dada la naturaleza de la misma, vamos a usar uno invisible, formado por una serie de campos ocultos que van a ir registrando los datos que se van a enviar al final del proceso.

Si no tuviésemos que trabajar con Nestcape 4x podríamos crear un sólo formulario en la página, cuyos datos serían enviados todos al final. Pero no es el caso, y debemos contemplar que este navegador precisa un formulario dentro de cada capa.

Nuestro formulario oculto va a estar formado por tantos campos hidden como necesitemos, y vamos a dar valores a estos campos dinámicamente, de forma que cada vez que el usuario rellene un campo, sea del formulario que sea, se va a pasar este valor a uno de estos campos ocultos, y al final, cuando se pulse el botón de enviar, se mandarán al servidor los datos de estos campos ocultos.

Con las ideas claras, vamos entonces a crear el formulario oculto. Este no necesita estar en ninguna capa, ya que no vamos a hacer florituras con él, por lo que lo vamos a poner al final de nuestro documento, y va a contener un campo equivalente a cada uno de los diferentes campos de nuestros 3 formularios dinámicos. Como tenemos un total de 3 campos diferentes (tipo, anyos, nombre) vamos a crear 3 campos ocultos dentro de nuestro formulario fantasma, que además van a tener los mismos nombres, ya que no nos dará error por estar cada uno en formularios diferentes.

Nuestro código va a ser:

<form name="oculto" action="nuestra_accion" method="post">
<input type="hidden" name="tipo" value="0">
<input type="hidden" name="anyos" value="0">
<input type="hidden" name="nombre" value="0">
</form>

A los que asignamos un valor inicial 0, para así validar luego mejor. Una vez tenemos los campos necesarios, ahora tenemos que controlar cuáles rellena el usuario, y para ello vamos a usar el evento onChange. Este evento se dispara cuando el contenido de un campo de formulario cambia de valor, por lo que podemos establecer que cuando un campo de alguno de los 3 formularios visibles cambie se pase el nuevo valor al campo paralelo del formulario oculto. La forma de lectura del valor de un campo y el paso a otro es estándar en JavaScript, con la particularidad de que para Nestcape 4x debemos darle la ruta completa de capas padre-hijas en donde se encuentran los campos.

De esta forma, si tenemos un campo A y queremos pasar su valor a otro B de un formulario distinto deberemos ecribir:

<input type="text" name= "loquesea" onChange="document.forms.nombre_B.nombre_campo.value= this.value">

Pero para hacer las cosas más compatibles vamos a crear una función que va a tener por misión ir asignando a cada campo oculto el valor correspondiente del campo visible del mismo nombre. Mirad este código:

function escribe(nombre,valor)
 {
   if (nombre=="tipo")
   {
     if (ie || n6)
       document.forms.oculto.tipo.value=valor;
     else
       document.principal.document.fondo.document.forms.oculto.tipo.value=valor;
   }
    if (nombre=="anyos")
   {
     if (ie || n6)
       document.forms.oculto.anyos.value=valor;
     else
       document.principal.document.fondo.document.forms.oculto.anyos.value=valor;
   }
   if (nombre=="nombre")
   {
     if (ie || n6)
       document.forms.oculto.nombre.value=valor;
     else
       document.principal.document.fondo.document.forms.oculto.nombre.value=valor;
    }
 }

Esta función necesita dos parámetros: nombre, que va a ser al name del campo que queremos relenar, y valor, que es el value de dicho campo. De esta forma, cuando llamemos a la función desde un evento onChange le pasaremos el nombre del campo y el texto que ha introducido el usuario (value), y ella los pasará a los campos ocultos correspondientes.

Nota como hemos distinguido entre Explorer y Nestcape 6x por un lado (if(ie || n6)) y Nestcape 4x por otro, porque a este último hay que pasarle la ruta completa padre-hijos de las capas hasta llegar al formulario oculto.

Por último, sólo nos queda llamar a la función desde cada evento onChange, y en este evento vamos a usar el siguiente código:

Si el campo es una caja de texto:

onChange="escribe(this.name,this.value)"

y si es un select:

escribe(this.name,(this.options[this.selectedIndex].value))

Explicamos:

1) usamos el objeto genérico this, que en cada caso representa el objeto en cuestión, es decir, que si la referencia this se encuentra dentro de un input representará a ese objeto input, si está dentro de un enlace, representará a ese objeto link, etc.

2) en el caso de una caja de texto this.name es el name que tiene definido el objeto input en su definición, y this.value su atributo value.

3) en el caso de un select la cosa cambia un poco, ya que para acceder al valor de la opcion elegida en este elemento de formulario tenemos primero que obtener el índice correspondiente a la opción seleccionada (this.selectedIndex), y luego pasar este número (que va desde 0 haste el número de opciones-1) al objeto this.options[i], con lo que optenemos la opción selecionada, accediendo entonces a atributo value.

Para comprobar el resultado he activado el botón "enviar", de tal forma que cuando lo pulsiis se presentará una ventana de alerta con los datos introducidos en el formulario correspondiente a música. Haced aparecer este formulario, elegid unos datos de ejemplo y pulsad el botón "enviar".

El resultado obtenido es este.

Si queréis ver el código fuente, botón derecho sobre la ventana flotante y seleccionar "ver código fuente".