1

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>

1 respuesta 1

2

Cambia:

 style="visibility:hidden"

a

style="display:none"

Y en el Javascript:

function mas1() {
    if (document.getElementById('yesCheck1').checked) {
        document.getElementById('visita1').style.display = 'block';
    }
    else document.getElementById('visita1').style.display = 'none';
}

E el mismo con el resto

1
  • Muchísimas gracias... sos un pro :d Commented el 22 jun. 2017 a las 20:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.