切換登錄表單以註冊表格與jquery

Question

我搜索了周圍，但我沒有找到任何接近我想要的東西。我在同一頁面上有一個登錄表單和一個登記表格。我對jquery不太好，我仍然在學習。我想第一次登錄，然後如果客戶沒有帳戶，點擊登記，登錄表單將淡出，登記表將淡入，在頁面上的同一個地方。

請有人給我一個jQuery代碼的幫助。

<form action="" method="post"> 
<div class="field"> 
    <label for="username">Username</label> 
    <input type="text" name="username" id="username" autocomplete="off"> 
</div> 

<div class="field"> 
    <label for="password">Password</label> 
    <input type="password" name="password" id="password" autocomplete="off"> 
</div> 

<div class="field"> 
    <label for="remember"> 
    <input type="checkbox" name="remember" id="remember"> Remember me 
    </label> 
</div> 
<input type="submit" value="Log in" class="login__submit"> 
<p class="login__signup">Don't have an account? &nbsp;<a>Sign up</a></p> 
</form> 

<form action="" method="post"> 
    <div class="field"> 
     <label for="username">Username</label> 
     <input type="text" name="username" id="username" value="<?php echo escape(Input::get('username')); //this is for sticky form ?>" autocomplete="off"> 
    </div> 

    <div class="field"> 
     <label for="password">Password</label> 
     <input type="password" name="password" id="password"> 
    </div> 

    <div class="field"> 
     <label for="password_again">Password again</label> 
     <input type="password" name="password_again" id="password_again"> 
    </div> 

    <div class="field"> 
     <label for="name">Name</label> 
     <input type="name" name="name" id="name" value="<?php echo escape(Input::get('name')); ?>"> 
    </div> 

    <input type="hidden" name="token" value="<?php echo Token::generate(); ?>"> 
    <input type="submit" value="Register"> 
</form> 

Answer 1

試試這個::

<div id="signin_div"> 

<form action="" method="post"> 
<div class="field"> 
    <label for="username">Username</label> 
    <input type="text" name="username" id="username" autocomplete="off"> 
</div> 

<div class="field"> 
    <label for="password">Password</label> 
    <input type="password" name="password" id="password" autocomplete="off"> 
</div> 

<div class="field"> 
    <label for="remember"> 
    <input type="checkbox" name="remember" id="remember"> Remember me 
    </label> 
</div> 
<input type="submit" value="Log in" class="login__submit"> 
<p class="login__signup">Don't have an account? &nbsp;<a href="javascript:void(0)" id="showSignUp">Sign up</a></p> 
</form> 

</div> 

<div id="signup_div"> 

<form action="" method="post"> 
    <div class="field"> 
     <label for="username">Username</label> 
     <input type="text" name="username" id="username" value="<?php echo escape(Input::get('username')); //this is for sticky form ?>" autocomplete="off"> 
    </div> 

    <div class="field"> 
     <label for="password">Password</label> 
     <input type="password" name="password" id="password"> 
    </div> 

    <div class="field"> 
     <label for="password_again">Password again</label> 
     <input type="password" name="password_again" id="password_again"> 
    </div> 

    <div class="field"> 
     <label for="name">Name</label> 
     <input type="name" name="name" id="name" value="<?php echo escape(Input::get('name')); ?>"> 
    </div> 

    <input type="hidden" name="token" value="<?php echo Token::generate(); ?>"> 
    <input type="submit" value="Register"> 
</form> 

</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script> 

$(document).ready(function(){ 
    $("#showSignUp").click(function(){ 
     $("#signin_div").hide(); 
     $("#signup_div").show(); 

    }); 
}); 

</script> 

Answer 2

$(document).ready(function(){ 
 
    $("#log_in").click(function(){ 
 
     $(".login_form").css('display', 'none'); 
 
     $(".display_none").css('display', 'block'); 
 
    }); 
 
});

.display_none 
 
{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="login_form"> 
 
     <form action="" method="post"> 
 
     <div class="field"> 
 
      <label for="username">Username</label> 
 
      <input type="text" name="username" id="username" autocomplete="off"> 
 
     </div> 
 

 
     <div class="field"> 
 
      <label for="password">Password</label> 
 
      <input type="password" name="password" id="password" autocomplete="off"> 
 
     </div> 
 

 
     <div class="field"> 
 
      <label for="remember"> 
 
      <input type="checkbox" name="remember" id="remember"> Remember me 
 
      </label> 
 
     </div> 
 
     <input type="submit" value="Log in" class="login__submit"> 
 
     <p class="login__signup">Don't have an account? &nbsp;<a href="#" id="log_in">Sign up</a></p> 
 
     </form> 
 
     </div> 
 
     <div class ="display_none"> 
 
     <form action="" method="post"> 
 
     <div class="field"> 
 
      <label for="username">Username</label> 
 
      <input type="text" name="username" id="username" autocomplete="off"> 
 
     </div> 
 

 
     <div class="field"> 
 
      <label for="password">Password</label> 
 
      <input type="password" name="password" id="password"> 
 
     </div> 
 

 
     <div class="field"> 
 
      <label for="password_again">Password again</label> 
 
      <input type="password" name="password_again" id="password_again"> 
 
     </div> 
 

 
     <div class="field"> 
 
      <label for="name">Name</label> 
 
      <input type="name" name="name" id="name" > 
 
     </div> 
 

 
     <input type="hidden" name="token" > 
 
     <input type="submit" value="Register"> 
 
     </form> 
 
     </div>

Answer 3

這就是我一直在尋找的結果：

<script> 

$(document).ready(function(){ 
    $(".register").hide(); 
    $("#showSignUp").click(function(event){ 
     event.preventDefault(); 
     $(".login").fadeToggle("slow"); 
     $(".register").toggle(1000); 

    }); 
}); 

</script> 

沒有插入任何第JS e html代碼，或修改css頁面。