wolfgang1983 wolfgang1983 - 7 months ago 13
Javascript Question

When refresh page make sure stay in same div area

When I click on my next button and it goes to step 2 and if I reload the page I would like to make sure it stays on the same div that I am on.

The 2 divs I use are

join_form_1
and
join_form_2


At the moment it when I reload page it goes back to first div

How can I make it stay on the div I am on?

Codepen Example Here

$(document).ready(function(){

$("#join_form_2").hide();
$("#step_1_link").addClass("active");

$("#next").click(function(){
$("#step_1_link").removeClass("active");
$("#step_2_link").addClass("active");
$("#join_form_1").hide();
$("#join_form_2").show();
});

});


HTML

<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="heading-message">
<div class="text-center">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="text-center">
<h1>Request A Admin Member Login</h1>
</div>
</div>
</div>
</div>
<div class="row">

<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">


<ol class="steps list-inline">
<li id="step_1_link">
<a href="">Step 1: Set up a personal account</a>
</li>
<li id="step_2_link">
<a href="">Step 2: Choose profile picture</a>
</li>
</ol>

<div id="join_form_1">

<div class="form-group">
<label>Username</label>
<input type="text" name="username" value="" class="form-control" placeholder="" />
</div>

<div class="form-group">
<label>Email</label>
<input type="text" name="email" value="" class="form-control" placeholder="" />
</div>

<div class="form-group">
<label>Password</label>
<input type="password" name="password" value="" class="form-control" placeholder="" />
</div>

<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" placeholder="" />
</div>

<div class="form-group">
<button type="button" class="btn btn-default" id="next">Next</button>
</div>

</div><!-- Setup_1 -->

<div id="join_form_2">

<div class="form-group">
<label>Upload A Image</label>
<input type="file" name="userfile" size="50" />
</div>

</div><!-- Setup_1 -->

</div>

<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box">
<h2>You'll Love This Forum</h2>
</div>
</div>
</div>
</div>

Answer

You can use javascript cookie API here

So when user clicks 'Next'

 Cookies.set('active', 'join_form_2');

Than if user clicked in the previous session, show form 2.

if (Cookies.get('active') == 'join_form_2') {
   $("#join_form_1").hide();
   $("#step_1_link").removeClass("active");
} else {
   $("#join_form_2").hide();
   $("#step_1_link").addClass("active");
}

Here is working codepen.

Comments