How to properly change url for jQuery single login, register and forgot password
I am making an application using CodeIgniter, jQuery, etc. He has a page that has 3 forms for login, registration and forgot password. They are all on the same page.
By default, the login page (login form) is displayed and clicking "register" will display the register form without reloading. I accomplished this by creating different sections in the view for each form, and then using jquery to call that section, which displays the registration form and hides the login form, and this back button appears, which takes me back to the login page.
Whose code:
jQuery('#register-form').click(function () {
jQuery('.login-form').hide();
jQuery('.forget-form').show();
});
jQuery('#back-btn').click(function () {
jQuery('.login-form').show();
jQuery('.forget-form').hide();
});
I would like to know how to get the url to behave correctly so that I can access each form just by going to its url.
for example example.com/#register-form will take me directly to my registration form, also hitting the back button, my url should change accordingly, just like getbootstrap.com works. The same thing happens with a forgotten password.
I tried the jquery-hashchange plugin but just couldn't figure out exactly how. Can anyone tell me the correct way to do this without the help of any plugin? And if a plugin is needed, suggest it.
source to share
OK, so if I understand you correctly, you want to dynamically show or hide the correct form based on a button click or on the URL itself using a hash tag. And if possible, you will love it without the help of a plugin.
Assuming I understand this correctly, the following code might be something like what you are looking for. Note that in this example I have not posted all the error handling and so on, but enough here, I believe I helped "get started" in the direction you are looking for.
Some initial jquery / javascripting to set things up.
var urlHref = window.location.href;
var urlHostName = window.location.hostname;
var urlPathName = window.location.pathname;
var urlHashParam = urlHref.split("#");
$(document).ready(function() {
$("#hostName").html(urlHostName);
$("#pathName").html(urlPathName);
$("#hostHref").html(urlHref);
$("#hashTag").html(urlHashParam[1]);
switch(urlHashParam[1]) {
case "register":
manageForms("register");
break;
case "forgot":
manageForms("forgot");
break;
default:
manageForms("login");
}
$('#btnRegister').click(function() {
manageForms("register");
});
$('#btnLogin').click(function() {
manageForms("login");
});
$('#btnForgot').click(function() {
manageForms("forgot");
});
});
function manageForms(visibleForm) {
$("#login").hide();
$("#register").hide();
$("#forgot").hide();
$("#" + visibleForm).show();
if (history.pushState) {
// only works if the browser supports pushState.
window.history.pushState("test", "Title", urlPathName + "#" + visibleForm);
}
}
Basically what we are doing here is getting the various properties of the .login window so that we can get the values we are looking for.
We use the login form by default at switch time (since you want it first if the url doesn't have a hash tag or the one that is requested is unknown)
You also asked to dynamically change the url (with a new tag if selected via a button click), without reloading the form. This is possible in modern browsers, but older browsers are not. It is operated
if (history.pushState) {
// only works if the browser supports pushState.
window.history.pushState("test", "Title", urlPathName + "#" + visibleForm);
}
Since not all browsers support it, a quick check for support is performed before using the command.
And finally, here is the HTML section for this code test.
HREF: <span id="hostHref"></span>
<br>
Host Name: <span id="hostName"></span>
<br>
Path Name: <span id="pathName"></span>
<br>
Hash Tag Parameters: <span id="hashTag"></span>
<br>
<hr>
<input type="button" id="btnLogin" value="Login">
<input type="button" id="btnRegister" value="Register for Access">
<input type="button" id="btnForgot" value="Forgot Password">
<hr>
<div id="login">
This is the Login Section
</div>
<div id="register">
This is the Register Section
</div>
<div id="forgot">
This is the forgot password section
</div>
Hope this is at least helpful.
source to share