Replace form by another one on click with javascript

Question

I need your help for my code :

I've got two forms, one to register and another one to log in.

I would like to replace the log in form by the register form when the user clicks on "Sign up" link. Same if he already has an account, I would like to replace the register form by the log in form when clicking on the "log in" link.

Here my two forms :

         <!-- Login form -->
         <div class="log form" id="login">
            <h2>Log in</h2>
            <form class="form_log">
                 <div>
                     <label for="login">Login : </label>
                     <input type="text" name="login" id="login" required>
                 </div>

                 <div>
                     <label for="password">Password : </label>
                     <input type="text" name="password" id="password" required>
                 </div>

                 <div>
                     <input type="submit" value="Connexion">
                 </div>

                 <p>Don't have an account ? <a href="#" onclick="display('#register')">Sign up</a></p>
             </form>
          </div>

          <!-- Register form -->
          <div class="register form" id="register">
             <h2>Sign up</h2>
             <form class="form_register">
                <div>
                   <label for="login">Login : </label>
                   <input type="text" name="login" id="login" required>
                </div>

                <div>
                   <label for="password">Password : </label>
                   <input type="text" name="password" id="password" required>
                </div>

                <div>
                   <input type="submit" value="Connexion">
                </div>

                <p>Already registered ? <a href="#" onclick="display('#login')">Log in</a></p>
              </form>
          </div>

Script :

 $(document).ready(function(){
      function display (open){
         $(open).css("display", "block");
         $(".form").not($(open)).css("display","none");
      }
 });

I think something is missing or wrong in my code but I don't know exactly what.

Answer 1

Try this. What wrong with your code is you don't put your function inside a ready() event handler.

 function display(divId) { $('.form').hide(); $(divId).show(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Login form --> <div class="log form" id="login" style="display: none"> <h2>Log in</h2> <form class="form_log"> <div> <label for="login">Login : </label> <input type="text" name="login" id="login" required> </div> <div> <label for="password">Password : </label> <input type="text" name="password" id="password" required> </div> <div> <input type="submit" value="Connexion"> </div> <p>Don't have an account ? <a href="#" onclick="display('#register')">Sign up</a></p> </form> </div> <!-- Register form --> <div class="register form" id="register"> <h2>Sign upn</h2> <form class="form_register"> <div> <label for="login">Login : </label> <input type="text" name="login" id="login" required> </div> <div> <label for="password">Password : </label> <input type="text" name="password" id="password" required> </div> <div> <input type="submit" value="Connexion"> </div> <p>Already registered ? <a href="#" onclick="display('#login')">Log in</a></p> </form> </div>

Answer 2

Toggle can do toggle between the display of form

 function display() { $("#login").toggle(); $("#register").toggle(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Login form --> <div class="log form" id="login" style="display: none"> <h2>Log in</h2> <form class="form_log"> <div> <label for="login">Login : </label> <input type="text" name="login" id="login" required> </div> <div> <label for="password">Password : </label> <input type="text" name="password" id="password" required> </div> <div> <input type="submit" value="Connexion"> </div> <p>Don't have an account ? <a href="#" onclick="display('#register')">Sign up</a></p> </form> </div> <!-- Register form --> <div class="register form" id="register"> <h2>Sign upn</h2> <form class="form_register"> <div> <label for="login">Login : </label> <input type="text" name="login" id="login" required> </div> <div> <label for="password">Password : </label> <input type="text" name="password" id="password" required> </div> <div> <input type="submit" value="Connexion"> </div> <p>Already registered ? <a href="#" onclick="display('#login')">Log in</a></p> </form> </div>