how to change url on toggle javascript without refreshing the page

Question

I have two buttons Sign-in and Register. Sign-in button shows login form and register button shows register form when clicked. What I want is to change the url without refreshing the page so if I click register it should change url to register same to the login. So far when I click the register button it change the url but when I click the login it doesn't change to login url it keeps showing the register url how can I fix this?

Html

   <li class="signin-active"><a class="btn">Log in</a></li>
   <li class="signup-inactive"><a class="btn">Sign up </a></li>


    <div ng-app ng-init="checked = false">

     <form class="form-signin" action="" method="post" name="form">
      <label for="username">Username</label>
      <input class="form-styling" type="text" name="username" placeholder=""/>
      <label for="password">Password</label>
      <input class="form-styling" type="text" name="password" placeholder=""/>
      <input type="checkbox" id="checkbox"/>
      <label for="checkbox" ><span class="ui"></span>Remember me</label>
      <div class="btn-animate">
        <a class="btn-signin">Sign in</a>
      </div>
    </form>

          
         <form class="form-signup" action="" method="post" name="form">
           <label for="fullname">Full name</label>
           <input class="form-styling" type="text" name="fullname" placeholder=""/>
           <label for="email">Email</label>
           <input class="form-styling" type="text" name="email" placeholder=""/>
           <label for="password">Password</label>
           <input class="form-styling" type="text" name="password" placeholder=""/>
           <label for="confirmpassword">Confirm password</label>
           <input class="form-styling" type="text" name="confirmpassword" placeholder=""/>
           <a ng-click="checked = !checked" class="btn-signup">Sign Up</a>
         </form>
   </div>

Javascript

  <script>
  $(function() {
    var url = '{{ route('register') }}';
    var url1 = '{{ route('login') }}';

    $(".btn").click(function() {
    $(".form-signin").toggleClass("form-signin-left");
    $(".form-signup").toggleClass("form-signup-left");
    $(".signup-inactive").toggleClass("signup-active");
    $(".signin-active").toggleClass("signin-inactive");
        window.history.pushState('null', 'null', url);
    });
});
</script>

Emiel Zuurbier · Accepted Answer · 2020-08-19 20:22:38Z

1

window.history.pushState('null', 'null', url);

This is always pushing url to the history. You need to change your code to push url1 (login) if the user is already on the register page.

I would recommend doing this by separating two different click handlers Add the class "login-btn" to your login button and use $(".login-btn").click(function() { to handle that, and the same approach for your register button

edited Aug 19, 2020 at 20:22

Emiel Zuurbier

21.2k3 gold badges25 silver badges36 bronze badges

answered Aug 19, 2020 at 20:18

AdamExchange

1,3091 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to change url on toggle javascript without refreshing the page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related