Hola a tod@s!!
Esta es la primera vez que escribo, intentaré exponer mi problema lo mejor posible.
Primero que todo destacar que llevo varios días navegando por el foro y el FAQ pero no he conseguido encontrar solución a mi problema.
Estoy diseñando una web con Dreamweaver CS3 en la cual mediante un botón de formulario de Lista/Menú se pueden elegir tres opciones, y la idea es que según cual de las tres opciones se seleccione, debajo aparezca otro formulario con distintas opciones.
Para hacer esto he creado una Div llamada #Contenedor (Relativa a la celda en la que se encuentra) y dentro de esta hay 3 Divs que serán las que se muestren u oculten en base a la opción elegida (cada capa tiene dentro un formulario distinto con todos sus campos).
En primer lugar probé a hacerlo con el comportamiento Javascript Mostrar/Ocultar elementos, asignando el comportamiento a cada etiqueta <option> dentro del <select> correspondiente. De esta forma me funcionó perfectamente en Firefox pero en Internet Explorer no funciona ya que no soporta los valores en la etiqueta <option> (de esto me pude asegurar en un POST de esta misma web).
Asi que como tuve que descartar esta opción, me puse a buscar y he conseguido encontrar un código que me muestra u oculta las capas correctamente, pero surge un problema, y es que pese a que dicho código incluye un window.onload para que al principio todas las capas estén ocultas no lo hace y al cargar la página aparecen las tres capas superpuestas. Una vez que eliges una opción ya solo queda la que tu has seleccionado, pero mi idea es que al cargar la página no aparezca ninguna seleccionada.
Espero haberme explicado lo mejor posible, adjunto el código a continuación (incluyo solo la parte mencionada ya que la página también incluye un menu de spry y comportamientos de rollover):
Código:
<head>
<!-- Script para mostrar/ocultar las capas de formulario -->
<script language="JavaScript">
function oculta(id){
var elDiv = document.getElementById(id); //se define la variable "elDiv" igual a nuestro div
elDiv.style.display='none'; //damos un atributo display:none que oculta el div
}
function muestra(id){
var elDiv = document.getElementById(id); //se define la variable "elDiv" igual a nuestro div
elDiv.style.display='block';//damos un atributo display:block que el div
}
window.onload = function(){/*hace que se cargue la función */
/* "Mandamos como parametro el nombre de la Div para ocultar" */
oculta('c1'); /*Ocultamos Todos*/
oculta('c2');
oculta('c3');
}
function oculta_select(selObj){
switch(selObj)
{
case "SL":
alert("Selecciona una opcion");
oculta('c1');
oculta('c2');
oculta('c3');
break;
case "c1":
//alert("Libros de Texto");
muestra('c1');
oculta('c2');
oculta('c3');
break;
case "c2":
//alert("Libros de Lectura");
muestra('c2');
oculta('c1');
oculta('c3');
break;
case "c3":
//alert("Otros Artículos");
muestra('c3');
oculta('c1');
oculta('c2');
break;
default:
alert("error, actualice la pagina");
}
}
</script>
<style type="text/css">
#contenedor {
position:relative;
z-index:100;
width: 412px;
}
#c1 {
position:absolute;
width:412px;
z-index:200;
}
#c2 {
position:absolute;
width:412px;
z-index:300;
}
#c3 {
position:absolute;
width:412px;
z-index:400;
}
</style>
<body>
<select name="oculMenu" class="formularios" id="oculMenu" onChange="oculta_select(this.value);" >
<option value="SL" selected>Seleccione un artículo...</option>
<option value="c1">Libros de Texto</option>
<option value="c2">Literatura (Libros de Lectura)</option>
<option value="c3">Otros</option>
</select>
</td>
</tr>
</table>
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="contenedor">
<!-- Formulario oculto Libros de Texto -->
<div id="c1">
<form id="libros_texto" name="libros_texto" method="post" action="../php/libros_texto.php">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="texto">Reserva tus libros de texto:</td>
</tr>
<tr>
<td colspan="2" class="textoInfo"> </td>
</tr>
<tr>
<td class="textoInfo">*Nombre:</td>
<td class="textoInfo">*Apellidos:</td>
</tr>
<tr>
<td class="textoInfo"><label>
<input name="nombre_texto" type="text" class="formularios" id="nombre_texto" size="25" />
</label></td>
<td class="textoInfo"><label>
<input name="apellidos_texto" type="text" class="formularios" id="apellidos_texto" size="25" />
</label></td>
</tr>
<tr>
<td class="textoInfo"> </td>
<td class="textoInfo"> </td>
</tr>
<tr>
<td class="textoInfo">*Correo electrónico:</td>
<td class="textoInfo">*Teléfono de contacto:</td>
</tr>
<tr>
<td class="textoInfo"><label>
<input name="email_texto" type="text" class="formularios" id="email_texto" size="25" />
</label></td>
<td class="textoInfo"><label>
<input name="telefono_texto" type="text" class="formularios" id="telefono_texto" size="25" />
</label></td>
</tr>
<tr>
<td class="textoInfo"> </td>
<td class="textoInfo"> </td>
</tr>
<tr>
<td class="textoInfo">*Título del libro:</td>
<td class="textoInfo">*Curso escolar:</td>
</tr>
<tr>
<td><label>
<input name="titulo_texto" type="text" class="formularios" id="titulo_texto" size="25" />
</label></td>
<td><label>
<input name="curso_texto" type="text" class="formularios" id="curso_texto" size="25" />
</label></td>
</tr>
<tr>
<td class="textoInfo"> </td>
<td class="textoInfo"> </td>
</tr>
<tr>
<td class="textoInfo">*Editorial:</td>
<td class="textoInfo">Autor:</td>
</tr>
<tr>
<td><label>
<input name="editorial_texto" type="text" class="formularios" id="editorial_texto" size="25" />
</label></td>
<td><label>
<input name="autor_texto" type="text" class="formularios" id="autor_texto" size="25" />
</label></td>
</tr>
<tr>
<td> </td>
<td class="textoInfo"> </td>
</tr>
<tr>
<td><span class="textoInfo">ISBN:</span> <span class="texto_pequeño">¿Que es esto?</span> <img src="../img/max.png" alt="ir" width="10" height="10" /></td>
<td class="textoInfo">*Cantidad:</td>
</tr>
<tr>
<td><label>
<input name="isbn_libros" type="text" class="formularios" id="isbn_libros" size="25" />
</label></td>
<td><label>
<select name="cantidad_texto" class="formularios" id="cantidad_texto">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</label></td>
</tr>
<tr>
<td> </td>
<td colspan="2" class="textoInfo"> </td>
</tr>
<tr>
<td class="textoInfo">Comentarios adicionales:</td>
<td colspan="2" class="textoInfo"> </td>
</tr>
<tr>
<td colspan="3"><label>
<textarea name="comentarios_texto" cols="45" rows="2" class="formularios" id="comentarios_texto"></textarea>
</label></td>
</tr>
<tr>
<td> </td>
<td colspan="2" class="textoInfo"> </td>
</tr>
<tr>
<td><label></label></td>
<td colspan="2"><label></label></td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><label>
<input name="enviar_texto" type="submit" class="boton_form" id="enviar_texto" value="Enviar" />
</label>
<label>
<input name="borrar_texto" type="reset" class="boton_form" id="borrar_texto" value="Borrar" />
</label></td>
</tr>
</table>
</form>
</div>
Y así igual habría otras dos Divs llamadas c2 y c3 con los otros dos formularios (iguales que este salvo algunos campos)
He intentado limpiar la página lo máximo posible para ver si hay algún elemento que esté haciendo conflicto ya que como comentaba anteriormente en Body tengo elementos onload generados por DW al hacer el spry o el rollover.
En concreto la etiqueta <BODY> aparece así:
Código:
<body onload="MM_preloadImages('../img/botones/botones_on_01.png','../img/botones/botones_on_02.png')">
Agradezco cualquier tipo de respuesta ya que llevo un par de días bloqueado por este tema (el ejemplo que me bajé con este código me funciona perfectamente) ¿Conoceis alguna otra manera de hacerlo o sabeis en que puedo estar fallando?
Muchas gracias de antemano y disculpar la parrafada
