jQuery switching between login and signup forms
3:35:00 AM Unknown 0 Comments

Toggle between login and sign up forms. jQuery helps us to hide and show elements or divs with click function.

Download source code:

Download

This tutorials we creating two forms like login and sign up and switching between form without reloading page.

Languages:

HTML 5, CSS 3, Bootstarp 3.3.7 and jQuery

Code for login and sign up forms
Login Form:

<div class="container">
    <div class="form1 col-md-4 col-md-offset-4 col-sm-offset-3 col-sm-6 col-xs-8 col-xs-offset-2">
        <div>
           <h3 class="active">Login</h3>
           <hr>
           <br>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="" placeholder="username">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" name="" placeholder="password">
        </div>
        <div class="form-group">
            <input type="button" class="btn btn-info" name="" value="Login">
        </div>


        <div>
            <p>not a member at yet please? <a href="" id="signUp">signup</a></p>
        </div>
    </div>
</div>

<div class="form2 col-md-4 col-md-offset-4 col-sm-offset-3 col-sm-6 col-xs-8 col-xs-offset-2">
        <div>
            <h3 class="active">Signup</h3>
            <hr>
            <br>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" name="" placeholder="username">
        </div>
        <div class="form-group">
            <input type="email" class="form-control" name="" placeholder="email">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" name="" placeholder="pasword">
        </div>
        <div class="form-group">
            <input type="button" class="btn btn-info" name="" value="Sign up">
        </div>

        <div>
            <p>Already a member please? <a href="" id="logIn">Login</a></p>
        </div>

    </div>

Added a form2 class to sign up form. First case hiding sign up form with css3 display none property.

.form2{
display: none;
}

So, now we are adding jQuery minified js from downloaded file.

Final jQuery code for switching login and signup forms

$(function(){
    $('#signUp').on('click', function(e){

      $(".form1").hide("slow");
      $('.form2').css('display', 'inline');

      e.preventDefault();
    });
});
    $(function(){
    $('#logIn').on('click', function(e){
      $(".form2").hide("slow");
      $('.form1').css('display', 'inline');
      e.preventDefault();
    });
});

In custom jquery we repeated hide and show functions are active according to click function.

Download file: