In the following code I have a number of <div>
hidden. But I have a problem, and that is that it leaves the last two <input>
in the place they would be, regardless of how visible or invisible they are.
The idea is that when checkbox
I click the , a "new" appears <div>
, but that the textarea
and the button move, where they end up as more appear.
<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>
Change:
a
And in the Javascript:
And the same with the rest