I have two popups (login & register) that i want to be able to switch between them with the click event on a span.
It works for the first time but then when i want to switch from the second popup to first one, the click event doesnt trigger meaning i cant go to the first popup after i went to second.
I searched and i discovered that the click events attached to elements are lost, but still couldnt achieve a solution.
- How can i switch between the two as many times as i want on the span click event (registerform and loginform classes) ?
HTML:
<div id="myModal" class="modal">
@include('frontoffice.login_popup')
</div>
The first time it loads with login view:
<div class="modal-content">
<span class="close">×</span>
<div class="popup-form">
<div class="popup_title">
OLÁ DE NOVO, LUZINHA !
</div>
<p class="popupcontent"> Se ainda não pertences á familia wolistic, <br> regista-te <span class="registerform orange"> aqui </span> </p>
{{ Form::open(array('method'=>'post','class'=> 'popup_form', 'url'=>'/customer_login')) }}
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<input id="email" type="email" class="form-control popupinput" name="email" value="{{ old('email') }}" required autofocus>
@if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<input id="password" type="password" class="form-control popupinput" name="password" required>
@if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
<div class="form-group popsubmit">
<button type="submit" class="btn btn-primary">INICIAR SESSÃO</button>
</div>
<p class="text_forgotpassword"> Esqueceste a password? Nós ajudamos, clica <span class="orange"> aqui! </span> </p>
{{Form::close()}}
</div>
</div>
Register view:
<!-- Modal content -->
<div class="modal-content" style="height: 65%">
<span class="close">×</span>
<div class="popup-form">
<div class="popup_title">
JUNTA-TE À FAMILIA WOLISTIC
</div>
<p class="popupcontent"> Já fazes parte ? Conecta-te <span class="loginform orange"> aqui </span> </p>
{{ Form::open(array('method'=>'post','class'=> 'popup_form', 'url'=>'/customer_register')) }}
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<input id="name" type="text" class="form-control popupinput" placeholder="Nome" name="name" value="{{ old('name') }}" required autofocus>
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<input id="email" type="email" class="form-control popupinput" placeholder="E-mail" name="email" value="{{ old('email') }}" required>
@if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<input id="password" type="password" class="form-control popupinput" placeholder="Password" name="password" required>
@if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
<div class="form-group">
<input id="password-confirm" type="password" class="form-control popupinput" placeholder="Repetir Password" name="password_confirmation" required>
</div>
<div class="form-group">
<div class="interests_list register_list">
<div>
<input type="checkbox" id="agree" name="agree"/>
<label for="agree"><span></span> Li e concordo com os termos e condições </label>
</div>
<div>
<input type="checkbox" id="sub" name="sub"/>
<label for="sub"><span></span> Quero subscrever a newsletter </label>
</div>
</div>
</div>
<div class="form-group popsubmit">
<button type="submit" class="btn btn-primary">REGISTAR</button>
</div>
{{ Form::close() }}
</div>
</div>
</div>
JS:
$(".registerform").click(function(){
$.get(
"/registerform",
function (data) {
$("#myModal").html(data);
}
);
});
$(".loginform").click(function(){
$.get(
"/loginform",
function (data) {
$("#myModal").html(data);
}
);
});
Trigger the modal:
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("openloginpopup");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
