Hi all 
I’m trying to kill 2 birds with 1 stone by putting both my registration and login forms on the same page, and the user lands on the correct form depending on which link he clicked (if he clicked ‘register’, he’ll go to www.example.com/register and if he clicked ‘login’ he’ll go to www.example.com/login, and the correct form should display depending on which parameter was set in the Url.
I’ve tried writing a javascript function to get the current url’s parameters, but it just wouldn’t work (the navigation buttons stop working as soon as I ask them to check for an url parameter!..):
/*jQuery function to check if $_GET is set in url*/
function check_url_for(var_name){
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == var_name){return pair[1];}
}
return(false);
}
Basically, if the url contains ‘register’ then the signup form should show by default (which it currently is) and if the url contains ‘login’ then the login form should show by default. But I can only make the signup/login divs show when a user ‘clicks’ on the tab-buttons. The signup form keeps showing in the login tab even if I make the login tab active by default…
How can I modify this function to change, when a user clicks on the link, OR if the user lands on the page with that url parameter?
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
Here’s the full code of the signup & login forms:
(see HTML lines 2-6, and 78, and JS lines 990-1000)
There’s a million ways to do this… one suggestion is:
use one url, and place both html on same page.
<div id="login_register_container">
<div id="login" class="master_container active">
<!--- LOGIN STUFF HERE --->
<a href="#" name="register">Register</a>
</div>
<div id="register" class="master_container">
<!--- REGISTER STUFF HERE --->
<a href="#" name="login">Login</a>
</div>
</div>
<style>
#login, #register {
display: none;
}
.active #login, .active #register {
display: block;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
const registerBtn = document.querySelector("#login a[name='register']");
const loginBtn = document.querySelector("#register a[name='login']");
registerBtn.addEventListener("click", function(){
// hides current container
this.closest(".master_container").classList.remove("active");
// displays other container
loginBtn.closest(".master_container").classList += "active";
});
loginBtn.addEventListener("click", function(){
// hides current container
this.closest(".master_container").classList.remove("active");
// displays other container
registerBtn.closest(".master_container").classList += "active";
});
});
1 Like
Your suggestion gave me an idea to write it this way, but it still seems hacky. Do you think it’s too flawed? (it worked! but I am not sure if it’s practical)
if ( window.location.href.indexOf("join") > -1 ) { //if url contains 'join'
$('.tab a.join').parent().addClass('active'); //add a class to the 'Sign Up' tab for CSS only
$('.tab a.join').parent().siblings().removeClass('active'); //remove the class for the 'Login' tab for CSS only
target = $('.tab a.join').attr('href'); //tell JavaScript which tab to display depending on its href
$('.tab-content > div').not(target).hide(); //hide the tab(s) which were active
$(target).show(); //show the tab to display
// alert('true');
} else if ( window.location.href.indexOf("login") > -1 ) {
$('.tab a.login').parent().addClass('active');
$('.tab a.login').parent().siblings().removeClass('active');
target = $('.tab a.login').attr('href');
$('.tab-content > div').not(target).hide();
$(target).show();
// alert('true');
} else {
// alert('false');
}
I always suggest writing code as though it were a book. You’re using lots of references that are not exactly clear.
Hmm…yes, I agree. I’ll comment it to explain, basically the references are only the actual elements and their immediate wrappers, or their immediate siblings.
If I were to go by doing minimum amount of changes to your existing pen, I would do this:
Changed parts:
<li class="tab active "><a id="tab-signup-btn" href="#signup">Sign Up</a></li>
<li class="tab "><a id="tab-login-btn" href="#login">Log In</a></li>
$('.tab a').on('click', (e)=>{
e.preventDefault();
switchTab($(e.target));
});
function switchTab(el){
el.parent().addClass('active');
el.parent().siblings().removeClass('active');
target = el.attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
}
$(document).ready(
function (){
if ( window.location.href.indexOf("join") > -1 ) {
switchTab($("#tab-signup-btn"));
}
else if ( window.location.href.indexOf("login") > -1 ) {
switchTab($("#tab-login-btn"));
} else {
// error here
}
}
);
1 Like
So by using two separate urls like that, you’ll need some sort of back-end filter (like node, or PHP) to handle the paths. If you simply went with, for example, the stock Apache HTTP server, those are two separate pages. You could set up page redirect, but that’s a whole different conversation.
Suppose, for the sake of argument, this was all in <your root dir>/register/index.html and you were to use a url like /register?action=register or '/register?action=login`, then it’s pretty painless. The logic could be handled like this:
After jQuery has loaded, and the event handlers have been initialized:
// This creates an array from the ?<name>=<value> portion of the url
let queryParameters = new URLSearchParams(window.location.href)
if(queryParameters['action'] == 'login'){
// you're using jQuery anyway, so...
$("#login").trigger("click");
} else if(queryParameters['action'] == 'register') {
$("#register").trigger("click");
}
1 Like
Of course using jQuery will be shorter code., but if you learn to use vanilla JS then you don’t need to download jquery CDN. (Faster page load).
Also you have several DOM lookups…
EXAMPLE:
$('.tab a.join').parent().addClass('active');
$('.tab a.join').parent().siblings().removeClass('active');
target = $('.tab a.join').attr('href');
$('.tab-content > div').not(target).hide();
$(target).show();
each time you do $('.tab a.join') there’s a DOM lookup. If you instead assign it to a variable then use that variable it will go significantly faster. Not to mention it will be easier to read.
1 Like
This is such a neat trick! Simply ‘triggering’ a click function! Now why did I not even remotely think of that…
Unfortunately I can’t use the parametized urls for this particular project, also, I’d like users to remember that they can get to the login/register page by simply using domain.com/login or domain.com/register
So I used your code like this:
if ( window.location.href.indexOf("login") > -1 ) {
$(".login").trigger("click");
} else if (window.location.href.indexOf("join") > -1) {
$(".signup").trigger("click");
}
Neat. Thanks snowmonkey
1 Like
Glad it worked out. It really depends on your server, and whether it is handling urls that way. And yeah, I tend to look for the lazy way… 
1 Like
I think your idea of finding the url position is ideal for other such pages, like one which handles form submissions. This is just a simple (landing) page which doesn’t even require that kind of sophistication. So thumbs up, your solution kills 3 birds with 1 stone. 
It’s a hack.
For example., if you have a webpage that has the word “login” or “join” in it this code will run.
So if you’re on a page called https://mywebsite.com/joint-task it would run erroneously.
Also., you would have to run this code on window.load since document.ready() wouldn’t necessarily have built the DOM yet. Which means you’d see one of the pages for a period of time until the page fully loaded.
Of course, if your joint-task page had loaded the javascript from the login/register page, there are bigger problems.
And, as she’s running the jQuery trigger() thing, the DOM has already been constructed. I would guess she’s running her jQuery in a $(function(){...});
Not really… Lots of people compress all their JS files into one so that there is only 1 request to server. That’s why encapsulation is good and globals are bad.
I agree about the compression thing, it does make sense, but:
Actually it’s not that complicated…This page is a PHP document, the only reason I’m doing it this way is so that no code needs to be duplicated. This is the folder structure:
root folder
...
signup.php // require 'signup_login.inc.php';
login.php // require 'signup_login.inc.php';
signup_login.inc.php //the html & javascript
That’s it. No other pages, and no other url parameters, can really cause erroneous behaviour, unless the user manually types something weird up there, for which I have some .htaccess redirects setup
If you’re using PHP., then that means you’re likely using apache.
Just use apache rewrite rules.
I would if I could 
I tried, before going for a JS or jQuery solution, but did not succeed.
anywho, glad it all worked out. Here to help whenever.
1 Like