user2020618 user2020618 - 3 months ago 9
HTML Question

jQuery form .hide() not working

I have two forms in my HTML

<form id="formRegistroMarcaAtletaDistancia">
<ul class="form">
<li> <label>Centimetros:</label><input class="ingresoDatos" name="cmAtl2" id="cmAtl2" type="number" min="0" required/></li>
</ul>
</form>

<form id="formRegistroMarcaAtletaTiempo">
<ul class="form">
<li> <label>Minutos:</label><input class="ingresoDatos" name="minutosNat" id="minutosNat" type="number" min="0" required/></li>
<li> <label>Segundos:</label><input class="ingresoDatos" name="segundosNat" id="segundosNat" type="number" min="0" required/></li>
</ul>
</form>


And this if statement (condition is working as intended, already tested) in an external file.

if(distancia) {
$("#formRegistroMarcaAtletaTiempo").hide();
$("#formRegistroMarcaAtletaDistancia").show();
} else {
$("#formRegistroMarcaAtletaDistancia").hide();
$("#formRegistroMarcaAtletaTiempo").show();
}


If the condition distancia is not met the code works as intended.

If the condition is met both forms are displayed.

Resulting in formRegistroMarcaAtletaDistancia always being displayed, and formRegistroMarcaAtletaTiempo being displayed only when it should be.

I tried changing the order of the forms, like so

<form id="formRegistroMarcaAtletaTiempo">
<ul class="form">
<li> <label>Minutos:</label><input class="ingresoDatos" name="minutosNat" id="minutosNat" type="number" min="0" required/></li>
<li> <label>Segundos:</label><input class="ingresoDatos" name="segundosNat" id="segundosNat" type="number" min="0" required/></li>
</ul>
</form>

<form id="formRegistroMarcaAtletaDistancia">
<ul class="form">
<li> <label>Centimetros:</label><input class="ingresoDatos" name="cmAtl2" id="cmAtl2" type="number" min="0" required/></li>
</ul>
</form>


And to my surprise now formRegistroMarcaAtletaTiempo is always displayed and formRegistroMarcaAtletaDistancia is only displayed when it should be.

Edit:
Whole div in case it matters

<div id="subpagina5" class="contenedor">
<h1 class="encabezado">Registro de marca de un atleta en una disciplina</h1>
<form id="formRegistroMarcaAtleta">
<ul class="form">
<li> <label>Disciplina:</label>
<select id="listaDisciplinasRegistroMarcaAtleta" class="listaDatos"></select>
</li>
<li> <label>Atleta:</label>
<select id="listaAtletasRegistroMarcaAtleta" class="listaDatos"></select>
</li>
</ul>

<form id="formRegistroMarcaAtletaTiempo">
<ul class="form">
<li> <label>Minutos:</label><input class="ingresoDatos" name="minutosRMA" id="minutosRMA" type="number" min="0" required/></li>
<li> <label>Segundos:</label><input class="ingresoDatos" name="segundosRMA" id="segundosRMA" type="number" min="0" required/></li>
</ul>
</form>

<form id="formRegistroMarcaAtletaDistancia">
<ul class="form">
<li> <label>Centimetros:</label><input class="ingresoDatos" name="cmRMA" id="cmRMA" type="number" min="0" required/></li>
</ul>
</form>

<div class="btnContenedor">
<input type="submit" value="Aceptar" id="btnRegistroMarcaAtleta" class="btnSubmit" />
</div>
</form>
</div>

Answer

You had arranged form as below, basically form shall not be nested as per XHTML validation. Once you fix this your issue will be sorted in the fiddle which you had posted.

Hope this helps

 <form id="formRegistroMarcaAtleta">
..
 <form id="formRegistroMarcaAtletaTiempo"></form>
...
 <form id="formRegistroMarcaAtletaDistancia"></form>
</form>