使用 javascript 在单击时将表单替换为另一个表单

Question

我的代码需要您的帮助：

我有两种表格，一种用于注册，另一种用于登录。

当用户单击“注册”链接时，我想用注册表替换登录表。 如果他已经有一个帐户，我想在单击“登录”链接时将注册表替换为登录表单。

这是我的两种形式：

         <!-- 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>

脚本 ：

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

我认为我的代码中缺少某些内容或错误，但我不知道到底是什么。

Answer 1

尝试这个。 你的代码有什么问题是你没有把你的函数放在 ready() 事件处理程序中。

 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 可以在表单的显示之间进行切换

 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>