hola a todos estoy intentando crear un formulario php y mysql pero tengo unos problemas en el momento de ocultar unos div que se encuentran dentro del formulario.
La idea es la siguiente tengo un formulario y dentro de este tengo unos div que a su vez contienen unos input que se pueden ver en el momento en que el usuario le de clic en un boton. en general son 48 botones que abren 48 partes diferentes del formulario el problema en si es que sin la etiqueta form me funciona pero colocandola no alguien aqui mi codigo sin la etiqueta form el cual me funciona:
<html>
<head>
<title>Mostrar y ocultar contenido con Javascript</title>
<style type="text/css">
#content {
width: 450px;
}
#close {
float: right;
font-weight: bold;
color: red;
}
.content2 {
margin: 0px auto;
min-height: 100px;
width: 450px;
box-shadow: 0 2px 5px #666666;
padding: 10px;
}
</style>
<script languague="javascript">
function mostrar() {
div = document.getElementById('flotante');
div.style.display = '';
}
function mostrar2() {
div = document.getElementById('flotante2');
div.style.display = '';
}
function cerrar() {
div = document.getElementById('flotante');
div.style.display = 'none';
}
function cerrar2() {
div = document.getElementById('flotante2');
div.style.display = 'none';
}
</script>
</head>
<body>
<div id="content">
<p><a href="javascript:mostrar();"><button id="1">diente 1</button></a></p>
<div id="flotante" style="display:none;" class="content2">
<div id="close"> <a href="javascript:cerrar();">cerrar</a>
</div>
<label>nombre diente</label>
<input type="text" id="diente" name="d1" value="d1" />
<label>Ingrese problema labial</label>
<input name="labial" type="text" />
<label>Ingrese problema lingual </label>
<input name="lingual" type="text" />
<label>Ingrese problema insisal </label>
<input name="insisal" type="text" />
<label>Ingrese problema mesial </label>
<input name="mesial" type="text" />
<label> Ingrese problema distal </label>
<input name="distal" type="text" />
</div>
<p><a href="javascript:mostrar2();"><button id="2">diente 2</button></a></p>
<div id="flotante2" style="display:none;" class="content2">
<div id="close"><a href="javascript:cerrar2();">cerrar</a></div>
<label>nombre diente</label>
<input type="text" id="diente" name="d1" value="d2" />
<label>Ingrese problema labial</label>
<input name="labial2" type="text" />
<label>Ingrese problema lingual </label>
<input name="lingual2" type="text" />
<label>Ingrese problema insisal </label>
<input name="insisal2" type="text" />
<label>Ingrese problema mesial </label>
<input name="mesial2" type="text" />
<label> Ingrese problema distal </label>
<input name="distal2" type="text" />
</div>
</div>
</body>
</html>
Alguien que me pueda ayudar o que me pueda dar un ejemplo de como hacerlo
