Switch between two contents with Jquery html replace - php

Question

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";
}
}

Answer 1

I think this can help you, if you press the "open" button swtich between modals if one of them are open, if not open the modal1:
HTML
<div id="openloginpopup">
<div class="modal-content">
open
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content modal1">
<span class="close">×</span>
<div class="popup-form">
modal1
</div>
</div>
</div>
<div id="myModal2" class="modal">
<div class="modal-content modal1">
<span class="close">×</span>
<div class="popup-form">
modal2
</div>
</div>
</div>
JS
$("#openloginpopup").on('click', function(){
if(!$('#myModal').is(':visible') && !$('#myModal2').is(':visible')){
$('#myModal').modal('show');
}else{
if($('#myModal').is(':visible')){
$('#myModal2').modal('show');
$('#myModal').modal('hide');
}else{
$('#myModal2').modal('hide');
$('#myModal').modal('show');
}
}
});
$(".modal").on('click', function(){
$(this).modal('hide');
});
Test link
https://jsfiddle.net/022bca5x/12/

Answer 2

You seem to be using Bootstrap so there is no need to use vanilla JS to control the modal and even more so when you're already using jQuery.
As per Bootstrap docs, you can use
$('#myModal').modal('show'); // show the modal
$('#myModal').modal('hide'); // hide the modal
Try
$("#openloginpopup").on('click', function(){
$('#myModal').modal('show');
}
In order to open another modal from within your current modal, first hide the active one, then open the second and vice versa.
$("#SECOND_MODAL_BUTTON").on('click', function(){
$('#FIRST_MODAL').modal('hide');
$('#SECOND_MODAL').modal('show');
}
$("#FIRST_MODAL_BUTTON").on('click', function(){
$('#SECOND_MODAL').modal('hide');
$('#FIRST_MODAL').modal('show');
}