En el siguiente código tengo una cantidad de <div>
ocultos. Pero tengo un problema, y es que me deja los dos últimos <input>
en el lugar que estarían, sin importar los visible o invisible que son.
La idea es que al momento de dar clic al checkbox
, me aparezca un "nuevo" <div>
, pero que el textarea
y el botón se trasladen, donde terminan a medida que vayan apareciendo más.
<html>
<head>
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
<title>Ingresar Pacientes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="../img/icono-simbolo.ico" />
</head>
<body>
<ul class="adeo">
<li class="ameo"><img src="../img/logo.jpg" alt=""/></li>
<li class="ameo"><a class="active" href="../index.html">Inicio</a></li>
<li class="ameo"><a href="IngresarpacientesFRM.html">Ingresar Paciente</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<form action = "IngresopacientesCO.jsp" method="post">
<table>
<tr>
<th>Nombre del Paciente:</th>
</tr>
<tr>
<td><input class="ingreso" type="number" name="txtpaciente" min="1" placeholder="Cédula del paciente" required></td>
</tr>
<tr>
<td><input class="ingreso" type="text" name="txtnmpaciente" placeholder="Nombre del Paciente" required></td>
</tr>
</table>
<table>
<tr>
<th>Visitante de Día:</th>
<th>Visitante de Noche:</th>
</tr>
<tr>
<td><input class="ingreso" type="number" name="txtvisitantedia" min="1" placeholder="Cédula del Visitante de Día"></td>
<td><input class="ingreso" type="number" name="txtvisitantenoche" min="1" placeholder="Cédula del Visitante de Noche"></td>
</tr>
<tr>
<td><input class="ingreso" type="text" name="txtnmvisitantedia" placeholder="Nombre del Visitante de Día"></td>
<td><input class="ingreso" type="text" name="txtnmvisitantenoche" placeholder="Nombre del Visitante de Noche"></td>
<td><input type="checkbox" onclick="javascript:mas1();" name="yesno" id="yesCheck1"> Más</td>
</tr>
</table>
<div id="visita1" style="visibility:hidden">
<table>
<tr>
<th>Visita 1:</th>
</tr>
<tr>
<td><input class="ingreso" type="number" name="txtvisita1" min="1" placeholder="Cédula de la Visita" required></td>
</tr>
<tr>
<td><input class="ingreso" type="text" name="txtnmvisita1" placeholder="Nombre de la Visita" required></td>
<td><input type="checkbox" onclick="javascript:mas2();" name="yesno" id="yesCheck2"> Más</td>
</tr>
<tr>
<td><input type="number" name="txthora2" min="02" max="05" style="width: 45px;"><input type="number" name="txtminutos2" min="00" max="59" style="width: 45px;"> P.M </td>
</tr>
</table>
</div>
<div id="visita2" style="visibility:hidden">
<table>
<tr>
<th>Visita 2:</th>
</tr>
<tr>
<td><input class="ingreso" type="number" name="txtvisita1" min="1" placeholder="Cédula de la Visita" required></td>
</tr>
<tr>
<td><input class="ingreso" type="text" name="txtnmvisita1" placeholder="Nombre de la Visita" required></td>
<td><input type="checkbox" onclick="javascript:mas3();" name="yesno" id="yesCheck3"> Más</td>
</tr>
<tr>
<td><input type="number" name="txthora2" min="02" max="05" style="width: 45px;"><input type="number" name="txtminutos2" min="00" max="59" style="width: 45px;"> P.M </td>
</tr>
</table>
</div>
<div id="visita3" style="visibility:hidden">
<table>
<tr>
<th>Visita 3:</th>
</tr>
<tr>
<td><input class="ingreso" type="number" name="txtvisita1" min="1" placeholder="Cédula de la Visita" required></td>
</tr>
<tr>
<td><input class="ingreso" type="text" name="txtnmvisita1" placeholder="Nombre de la Visita" required></td>
<td><input type="checkbox" onclick="javascript:mas4();" name="yesno" id="yesCheck4"> Más</td>
</tr>
<tr>
<td><input type="number" name="txthora2" min="02" max="05" style="width: 45px;"><input type="number" name="txtminutos2" min="00" max="59" style="width: 45px;"> P.M </td>
</tr>
</table>
</div>
<div id="visita4" style="visibility:hidden">
<table>
<tr>
<th>Visita 4:</th>
</tr>
<tr>
<td><input class="ingreso" type="number" name="txtvisita1" min="1" placeholder="Cédula de la Visita" required></td>
</tr>
<tr>
<td><input class="ingreso" type="text" name="txtnmvisita1" placeholder="Nombre de la Visita" required></td>
<td><input type="checkbox" onclick="javascript:mas5();" name="yesno" id="yesCheck5"> Más</td>
</tr>
<tr>
<td><input type="number" name="txthora2" min="02" max="05" style="width: 45px;"><input type="number" name="txtminutos2" min="00" max="59" style="width: 45px;"> P.M </td>
</tr>
</table>
</div>
<div id="visita5" style="visibility:hidden">
<table>
<tr>
<th>Visita 5:</th>
</tr>
<tr>
<td><input class="ingreso" type="number" name="txtvisita1" min="1" placeholder="Cédula de la Visita" required></td>
</tr>
<tr>
<td><input class="ingreso" type="text" name="txtnmvisita1" placeholder="Nombre de la Visita" required></td>
<td><input type="checkbox" onclick="javascript:mas6();" name="yesno" id="yesCheck6"> Más</td>
</tr>
<tr>
<td><input type="number" name="txthora2" min="02" max="05" style="width: 45px;"><input type="number" name="txtminutos2" min="00" max="59" style="width: 45px;"> P.M </td>
</tr>
</table>
</div>
<div id="visita6" style="visibility:hidden">
<table>
<tr>
<th>Visita 6</th>
</tr>
<tr>
<td><input class="ingreso" type="number" name="txtvisita1" min="1" placeholder="Cédula de la Visita" required></td>
</tr>
<tr>
<td><input class="ingreso" type="text" name="txtnmvisita1" placeholder="Nombre de la Visita" required></td>
<td><input type="checkbox" onclick="javascript:mas7();" name="yesno" id="yesCheck7"> Más</td>
</tr>
<tr>
<td><input type="number" name="txthora2" min="02" max="05" style="width: 45px;"><input type="number" name="txtminutos2" min="00" max="59" style="width: 45px;"> P.M </td>
</tr>
</table>
</div>
<div id="visita7" style="visibility:hidden">
<table>
<tr>
<th>Visita 7</th>
</tr>
<tr>
<td><input class="ingreso" type="number" name="txtvisita1" min="1" placeholder="Cédula de la Visita" required></td>
</tr>
<tr>
<td><input class="ingreso" type="text" name="txtnmvisita1" placeholder="Nombre de la Visita" required></td>
<td><input type="checkbox" onclick="javascript:mas8();" name="yesno" id="yesCheck8"> Más</td>
</tr>
<tr>
<td><input type="number" name="txthora2" min="02" max="05" style="width: 45px;"><input type="number" name="txtminutos2" min="00" max="59" style="width: 45px;"> P.M </td>
</tr>
</table>
</div>
<div id="visita8" style="visibility:hidden">
<table>
<tr>
<th>Visita 8</th>
</tr>
<tr>
<td><input class="ingreso" type="number" name="txtvisita1" min="1" placeholder="Cédula de la Visita" required></td>
</tr>
<tr>
<td><input class="ingreso" type="text" name="txtnmvisita1" placeholder="Nombre de la Visita" required></td>
</tr>
<tr>
<td><input type="number" name="txthora2" min="02" max="05" style="width: 45px;"><input type="number" name="txtminutos2" min="00" max="59" style="width: 45px;"> P.M </td>
</tr>
</table>
</div>
<center>
Observación:<br>
<textarea rows="4" cols="137" name="txtaobservacion"></textarea><br>
Seleccione la Habitación:<br>
<input type ="number" name="estancia" min="1" max="10" required>
<br>
<br>
<br>
<br>
<input type="submit" class="myButton" value="Enviar">
<button type="reset" class="myButton">Borrar Campos</button>
</center>
</form>
<script>
function mas1() {
if (document.getElementById('yesCheck1').checked) {
document.getElementById('visita1').style.visibility = 'visible';
}
else document.getElementById('visita1').style.visibility = 'hidden';
}
function mas2() {
if (document.getElementById('yesCheck2').checked) {
document.getElementById('visita2').style.visibility = 'visible';
}
else document.getElementById('visita2').style.visibility = 'hidden';
}
function mas3() {
if (document.getElementById('yesCheck3').checked) {
document.getElementById('visita3').style.visibility = 'visible';
}
else document.getElementById('visita3').style.visibility = 'hidden';
}
function mas4() {
if (document.getElementById('yesCheck4').checked) {
document.getElementById('visita4').style.visibility = 'visible';
}
else document.getElementById('visita4').style.visibility = 'hidden';
}
function mas5() {
if (document.getElementById('yesCheck5').checked) {
document.getElementById('visita5').style.visibility = 'visible';
}
else document.getElementById('visita5').style.visibility = 'hidden';
}
function mas6() {
if (document.getElementById('yesCheck6').checked) {
document.getElementById('visita6').style.visibility = 'visible';
}
else document.getElementById('visita6').style.visibility ='hidden';
}
function mas7() {
if (document.getElementById('yesCheck7').checked) {
document.getElementById('visita7').style.visibility = 'visible';
}
else document.getElementById('visita7').style.visibility ='hidden';
}
function mas8() {
if (document.getElementById('yesCheck8').checked) {
document.getElementById('visita8').style.visibility = 'visible';
}
else document.getElementById('visita8').style.visibility ='hidden';
}
</script>
</div>
</body>
</html>