I have two <form>
, one is to log in and the other is to register. The one <form>
for registration ( #registro-forma
) has a link below in which if you click it should load the <form>
login ( #login-forma
)
However it does not appear well, only half of the form is visible. When I put it alone if it appears well.
document.getElementById("loginclick").addEventListener("click", function(){
document.getElementById("registro-forma").style.display = "none";
document.getElementById("login-forma").style.display = "inline";
});
#login-forma{
display: none;
}
<!--FORM REGISTRO:-->
<div id="registro-forma">
<h3 id="registro-title">Comienza a Entrenar</h3>
<div class="row">
<form class="col s12">
Nombre de Usuario:
<div class="row">
<div class="input-field col s12">
<input id="disabled" type="text" class="validate">
<label for="disabled"></label>
</div>
</div>
Contraseña:
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password"></label>
</div>
</div>
Email:
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email"></label>
</div>
</div>
<button class="btn waves-effect waves-light btn-submit" type="submit" name="action">ENVIAR
<i class="material-icons right">arrow_forward</i>
</button>
<p>¿Ya estas registrado? <a id="loginclick" href="#" onclick="openLogin()">Logéate</a></p>
</div>
</form>
</div>
</div>
<!--FORM LOGIN:-->
<div id="login-forma">
<h3 id="registro-title">Entra con tu cuenta</h3>
<div class="row">
<form class="col s12">
Nombre de Usuario:
<div class="row">
<div class="input-field col s12">
<input id="disabled" type="text" class="validate">
<label for="disabled"></label>
</div>
</div>
Contraseña:
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password"></label>
</div>
</div>
<button class="btn waves-effect waves-light btn-submit" type="submit" name="action">ENVIAR
<i class="material-icons right">arrow_forward</i>
</button>
<p>¿No estas registrado? <a id="loginregister" href="#" onclick="openRegister()">Regístrate</a></p>
</div>
</form>
</div>
<div>
I have thought if it is a problem with the code of styles that I have for the video that goes over these two forms and that it is forcing the styles of the forms to do something strange, but the fact is that I have tried it in jsfiddle https:/ /jsfiddle.net/wuez4bpv/ and here both are displayed fine so I have no idea, and it has occurred to me if there is a way to completely eliminate one of the forms so that it can be displayed well (but then it can be recovered) .
In pure JS:
Being
element
your node to deletein JQuery
Being
element
theid
your node to eliminateedited for your comment
To make it visible/invisible:
To make it visible:
To make it invisible:
All the best.