Mostar/Ocultar div's Tenemos el siguiente codigo:
Código PHP:
<html>
<head>
<title>id Form</title>
<script language="javascript">
function mostrarBotones(oculta,muestra) {
if (oculta.length != 0 ) {
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 != 0 ) {
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>
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
Este tema le ha gustado a 1 personas