Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/11/2011, 09:05
augusto_jaramil
 
Fecha de Ingreso: junio-2004
Ubicación: Ciudad de Panama
Mensajes: 551
Antigüedad: 20 años, 8 meses
Puntos: 8
Pregunta Mostar/Ocultar div's

Holas a tod@s,

Tenemos el siguiente codigo:

Código PHP:
<html>
<
head>
<
title>id Form</title>
<
script language="javascript">

function 
mostrarBotones(oculta,muestra) {
   if (
oculta.length != ) {
alert("DEBE OCULTAR: "+oculta);
      var 
el document.getElementById(oculta); //se define la variable "el" igual a nuestro div
      
el.style.display = (el.style.display == 'none') ? 'block' 'none'//damos un atributo display:none que oculta el div
   
}
   if (
muestra.length != ) {
alert("DEBE MOSTRAR: "+muestra);
      var 
el document.getElementById(muestra);
      
el.style.display = (el.style.display == 'none') ? 'block' 'none';
   }
}
</script>
</head>
<body >
<table>
<form name="form1" method="post">
          <div id="formulario">
              <tr>
                <td class="clasetd">Codigo Reporte:
                </td>
                <td>
                  <input type="text" id="codigo" name="codigo" value="" class="claseinput" style="width:50px;">
                </td>
              </tr>
              <tr>
                <td class="clasetd">Nombre Reporte:
                </td>
                <td>
                  <input type="text" id="nombre" name="nombre" value="" class="claseinput" style="width:450px;" onChange="mostrarBotones('','botones');">
                </td>
              </tr>
          </div>

          <div id="grupos" style="display:none">
              <tr>
                <td class="clasetd">Grupos de Columnas:
                </td>
                <td>
                  <input type="text" id="grup" value="" class="claseinput" style="width:30px;">
                </td>
              <tr>
                <td class="clasetd">Nro. Columnas:
                </td>
                <td>
                  <input type="text" id="cols" value="" class="claseinput" style="width:30px;">
                </td>
              </tr>
          </div>

          <div id="botones" style="display:none">
            <tr>
              <td colspan="2">
                <input type="image" id="definir" name="accion" onClick="mostrarBotones('botones','grupos');" src="./imagenes/painter1.gif">
              </td>
            </tr>
          </div>

          <div id="resul">
          </div>
</form>
</table>
</body>
</html> 
La idea es la siguiente:

Cuando se carga el script debe mostrar el div "formulario". Una vez se diligencian los campos de este div se debe visualizar el div "botones". Al hacer click sobre la imagen debe ocultar el div "botones" y visualizar el div "grupos".

Tengo varias dudas al respecto:
1. Al ejecutar el script muestra todos los divs (formulario, grupos y botones). Si grupos y botones tienen definido style="display:none" supongo que se deben visualizar cuando se cambie el estado none a block, no es asi? Para solucionar esto cambie la etiqueta div por table y asi se soluciono esta parte.

2. Cuando hago click sobre el boton o imagen de la tabla botones pierdo los datos digitados en los dos campos del div formulario y no se cierra el div botones. El resultado debe ser ocultar botones y mostrar grupos sin perder los datos de formulario.

Que enredo tan enredado....

Que puedo hacer para solucionar esto?

Mil gracias de antenamo por su ayuda

Un Cordial saludo