How to call another HTML page from current HTML with some elements hidden?

Question

I'm currently developing a website. I have two page in this scenario and 1st one is home page and second one is signup page. In first page I have two buttons called Login and Signup. In signup HTML page I've made login form and signup form using divisions. Simply saying one division contain login form and other contain signup form and depending on what I need, I simply hide what I don't want using onclick method.

What I want

Now I need, when I click on login button in home page, it should go to the signup page but signup division should be hidden and login division should be visible. And if I click on signup button in home page, it should go to the signup page but login form including division should be hidden and login division should be visible.

<div class="container">    
    <div id="loginBox" style="margin-top:50px;padding-top:80px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
        //Code// 
    </div>   
    <div id="signupBox" style="margin-top:50px;padding-top:80px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
        //Code//
    </div>
</div>

My Approach

I thought to use javascript to access requesting page (signup page) and hide the suitable division and open the page. But I don't know how to do that. I couldn't find anything regarding on internet too. If you have another method which is easier than this please feel free to say. Thanks.

Answer 1

A CSS/HTML only approach

Step 1:

On your home page change buttons to links, but feel free to style them as buttons. Set a target on the links

E.g:

<a href="signup.html#signupBox">Sign Up</a> <a href="signup.html#loginBox">Log In</a>

Step 2:

Then in your signup.html page have something like the following:

<div class="container signup">    
    <div id="loginBox" style="margin-top:50px;padding-top:80px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
        //Code// 
    </div>   
    <div id="signupBox" style="margin-top:50px;padding-top:80px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
        //Code//
    </div>
</div>

and add the following CSS

.signup > div {display:none;}
.signup > div:target {display:block;}

When the signup page is accessed with a target eg http://yoursite/signup.html#loginBox, the appropriate section will be displayed.

This has the added benefit of signup and login being able to be bookmarked separately.

A simple one page demo:

.nav a {border: 1px solid black; padding: 15px; text-decoration: none; margin-right:15px; margin-top: 15px; font-weight:bold;}

.signup h2 {padding: 10px; background-color:blue;}
.signup a:link, .signup a:visited {color:white; text-decoration: none;}

.signup > div {display:none;}
.signup > div:target {display:block;}

<div class="nav">

    <a href="#signupBox">Sign Up</a> <a href="#loginBox">Log In</a>
</div>



    <div class="container signup">    
        <h2><a href="#loginBox">Log In</a></h2>
        <div id="loginBox" style="margin-top:50px;padding-top:80px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
            Your Log In Form Here
        </div>   
        <h2><a href="#signupBox">Sign Up</a></h2>
        <div id="signupBox" style="margin-top:50px;padding-top:80px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
            Your Signup Form Here
        </div>
    </div>

Note: them Demo just shows the basic mechanics in action.

If you want to get fancy you can use javascript to check if the # exists and set a default. See How do I get the value after hash (#) from a URL using jquery to get you started.

Answer 2

I hope you can try this.

    <script type="text/javascript">

    $(document).ready(function(){
            $("#loginBox").click(function(){

                 window.location.href = 'url';
            });
            $("#signupBox").click(function(){

              window.location.href = 'url';
            });
        });
    </script>

Answer 3

Your Home Page

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form method="POST">
<table>
    <tr>
        <td><input type="button" id="LogBtn" value="Login"></td>
        <td><input type="button" id="LogoutBtn" value="Signup"></td>
    </tr>
</table>
</form>
<script type="text/javascript">
jQuery("#LogBtn").click(function(){
window.location="signup.html?id=1";
})
jQuery("#LogoutBtn").click(function(){
window.location="signup.html?id=2";
})
</script>
</body>
</html>

---

Signup Page

---

<!DOCTYPE html>
<html>
<head>
    <title>Signup Page</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">


*, *:before, *:after {
  box-sizing: border-box;
}

html {
    overflow-y: scroll; 
}

body {
  background:$body-bg;
  font-family: 'Titillium Web', sans-serif;
}

a {
  text-decoration:none;
  color:$main;
  transition:.5s ease;
  &:hover {
    color:$main-dark;
  }
}

.form {
  background:rgba($form-bg,.9);
  padding: 40px;
  max-width:600px;
  margin:40px auto;
  border-radius:$br;
  box-shadow:0 4px 10px 4px rgba($form-bg,.3);
}

.tab-group {
  list-style:none;
  padding:0;
  margin:0 0 40px 0;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  li a {
    display:block;
    text-decoration:none;
    padding:15px;
    background:rgba($gray-light,.25);
    color:$gray-light;
    font-size:20px;
    float:left;
    width:50%;
    text-align:center;
    cursor:pointer;
    transition:.5s ease;
    &:hover {
      background:$main-dark;
      color:$white;
    }
  }
  .active a {
    background:$main;
    color:$white;
  }
}

.tab-content > div:last-child {
  display:none;
}


h1 {
  text-align:center;
  color:$white;
  font-weight:$thin;
  margin:0 0 40px;
}

label {
  position:absolute;
  transform:translateY(6px);
  left:13px;
  color:rgba($white,.5);
  transition:all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size:22px;
  .req {
    margin:2px;
    color:$main;
  }
}

label.active {
  transform:translateY(50px);
  left:2px;
  font-size:14px;
  .req {
    opacity:0;
  }
}

label.highlight {
    color:$white;
}

input, textarea {
  font-size:22px;
  display:block;
  width:100%;
  height:100%;
  padding:5px 10px;
  background:none;
  background-image:none;
  border:1px solid $gray-light;
  color:$white;
  border-radius:0;
  transition:border-color .25s ease, box-shadow .25s ease;
  &:focus {
        outline:0;
        border-color:$main;
  }
}

textarea {
  border:2px solid $gray-light;
  resize: vertical;
}

.field-wrap {
  position:relative;
  margin-bottom:40px;
}

.top-row {
  &:after {
    content: "";
    display: table;
    clear: both;
  }

  > div {
    float:left;
    width:48%;
    margin-right:4%;
    &:last-child { 
      margin:0;
    }
  }
}

.button {
  border:0;
  outline:none;
  border-radius:0;
  padding:15px 0;
  font-size:2rem;
  font-weight:$bold;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:$main;
  color:$white;
  transition:all.5s ease;
  -webkit-appearance: none;
  &:hover, &:focus {
    background:$main-dark;
  }
}

.button-block {
  display:block;
  width:100%;
}

.forgot {
  margin-top:-20px;
  text-align:right;
}
    </style>
</head>
<body>
<form method="POST">
<div class="container">    
   <div class="form">

      <ul class="tab-group">
        <li class="tab active"><a href="#signupBox">Sign Up</a></li>
        <li class="tab"><a href="#loginBox">Log In</a></li>
      </ul>

      <div class="tab-content">
        <div id="signupBox">   
          <h1>Sign Up for Free</h1>

          <form action="/" method="post">

          <div class="top-row">
            <div class="field-wrap">
              <label>
                First Name<span class="req">*</span>
              </label>
              <input type="text" required autocomplete="off" />
            </div>

            <div class="field-wrap">
              <label>
                Last Name<span class="req">*</span>
              </label>
              <input type="text"required autocomplete="off"/>
            </div>
          </div>

          <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>

          <div class="field-wrap">
            <label>
              Set A Password<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>

          <button type="submit" class="button button-block"/>Get Started</button>

          </form>

        </div>

        <div id="loginBox">   
          <h1>Welcome Back!</h1>

          <form action="/" method="post">

            <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email" required autocomplete="off"/>
          </div>

          <div class="field-wrap">
            <label>
              Password<span class="req">*</span>
            </label>
            <input type="password" required autocomplete="off"/>
          </div>

          <p class="forgot"><a href="#">Forgot Password?</a></p>

          <button class="button button-block"/>Log In</button>

          </form>

        </div>

      </div><!-- tab-content -->

</div> <!-- /form -->
</div>

</form>
<script type="text/javascript">
var id=GetQueryStringParams('id');
if(id == 1){
$("#loginBox").show();
$("#signupBox").hide();
}else{
$("#loginBox").hide();
$("#signupBox").show();
}
function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}
$('.form').find('input, textarea').on('keyup blur focus', function (e) {

  var $this = $(this),
      label = $this.prev('label');

      if (e.type === 'keyup') {
            if ($this.val() === '') {
          label.removeClass('active highlight');
        } else {
          label.addClass('active highlight');
        }
    } else if (e.type === 'blur') {
        if( $this.val() === '' ) {
            label.removeClass('active highlight'); 
            } else {
            label.removeClass('highlight');   
            }   
    } else if (e.type === 'focus') {

      if( $this.val() === '' ) {
            label.removeClass('highlight'); 
            } 
      else if( $this.val() !== '' ) {
            label.addClass('highlight');
            }
    }

});

$('.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);

});
</script>
</body>
</html>

---