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

Retoques finales.-

Una vez creado el código anterior, sólo nos falta ahora corregir un pequeño detalle.

Si seleccionamos el formulario de musica, rellenamos un campo cualquiera de él, y luego nos vamos al de cine y pulsamos enviar, vemos que el valor que habíamos introducido inicialmente en el formulario de música sigue estando presente.

Esto no es correcto, ya que se supone que si estamos en un tema no deben quedar restos de temas anteriores. Para corregir este fallo vamos a crear otra función (la última, amigos) cuya misión va a ser resetear todos los formularios de la página cuando se pinche uno cualquiera de los botones del menú. El código necesario es:

function borra()
  {
   if(ie || n6)
   {
     document.forms.formMusica.reset(),
     document.forms.formCine.reset();
     document.forms.formInformatica.reset();
     document.forms.oculto.reset();
   }
   else
   {
    document.principal.document.fondo.document.musica.document.musicafondo.document.forms.formMusica.reset();
   document.principal.document.fondo.document.cine.document.cinefondo.document.forms.formCine.reset();
    document.principal.document.fondo.document.informatica.document.informaticafondo.document.forms.formInformatica.reset();
    document.principal.document.fondo.document.forms.oculto.reset();
   }
 }

En esta función seguimos las normas que hemos empleado en las anteriores: distinguimos entre Explorer y Nestcape 6x por un lado y Nestcape 4x por otro. En el primer caso accedemos directamente a los formularios, y en el segundo damos la ruta completa de capas padres-hijos hasta llegar a cada formulario. Una vez accedidos los formularios, los ponemos a cero mediante el método reset( ) del objeto form.

Y ahora llamamos a esta función desde cada evento onClick de los botones de radio del menú, y desde el botón "borrar" inferior:

<input type="radio" class="radio" name="opcion" value="musica" onClick="muestracapa('musica');borra();">
...
<input type="button" class="boton" name="borrar" value="borrar" onClick="borra();">

Fijaros que cuando queremos llamar dos funciones desde un mismo evento tenemos que separar las llamadas con un punto y coma (;).

Para acabar, os muestro el código de la función envia(), encargada de sacar la ventana de alerta con los datos introducidos en el formulario elegido. Queda como tarea vuestra el estudiarla y sacar conclusiones:

function envia()
  {
   if (ie || n6)
   {
     var uno=document.forms.oculto.tipo.value;
     var dos=document.forms.oculto.anyos.value;
     var tres=document.forms.oculto.nombre.value;
   }
   else
   {
    var uno=document.principal.document.fondo.document.oculto.tipo.value;
    var dos=document.principal.document.fondo.document.oculto.anyos.value;
    var tres=document.principal.document.fondo.document.oculto.nombre.value;
   }
   alert('ha introducido los siguientes datos:\n'+uno+'\n'+dos+'\n'+tres);
 }

Una cosita más. No vamos a dejar el código de la página tan enmarañado. Vamos a hacer las cosas bien, sacando fuera de la página tanto los estilos como las funciones JavaScript.

Los estilos de las capas y demás se sacan a un fichero externo, que deberemos guardar en formato de texto plano y con extensión .css, y nos referiremos a él en la cabecera de la página mediante la instrucción:

<link rel="stylesheet" type="text/css" href="css/archivo.css" >

suponiendo que lo hayamos guardado en la carpeta css y con el nombre archivo.css

En cuanto al código JavaScript hacemos otro tanto, guardando todas las funciones y variables en un archivo externo, en formato de texto plano y que debe tener la extensisn .js. Así, si lo guardamos en un fichero que llamamos archivo.js, dentro de la carpeta js, tendremos que incluir la etiqueta siguiente en la cabecera de la página:

<script language="JavaScript" type="text/javascript" src="js/archivo.js"></script>

En las páginas siguientes tenéis los diversos archivos que van a formar nuestro formulario dinámico final.