使用 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>