动态地将html登录表单更改为注册表单

Question

我有一个登录表单，它接受用户凭据的输入。在底部，我有一个链接到一个注册用户表单。它带我到一个全新的页面注册一个用户。但是，是否有一种使用JQuery AJAX的方法来更改登录表单输入以获取注册输入并发送到相应的正确处理php文件？

我的登入表格：

<div id="backgroundLogin">
            <form name="login" method="post" action="./Login.php">
               <fieldset>
                  <p id="title">
                     Connect-a-Cutie Login
                  </p>
                  <p id="email">
                     <label> Email:</label>
                     <input type="text" name="email" placeholder="Type your email...">
                  </p>
                  <p id="password">
                     <label>Password:</label>
                     <input type="text" name="password" placeholder="Type your password...">
                  </p>
                     <button href="./LoginPage.php" type="submit">Submit!</button>
                  <p>
                     <a href="RegistrationPage.php"><p>Not yet a member? Register now!</p></a>
               </fieldset>
            </form>
         </div>

我的登记表：

 <form action="RegistrationPage.php" method="POST">
            Name: <input type="text" name="name" placeholder="Enter your name..."/><br/>
            Email: <input type="text" name="email" placeholder="Enter your email..."/><br/>
            Password: <input type="text" name="password" placeholder="Enter your password..."/> (make sure no one is looking...)<br/>
            Addess: <input type="text" name="address" placeholder="Enter your address..."/><br/>
            Do you want to be an admin? <input type="text" name="isAdmin" placeholder="TRUE or FALSE"/><br/><br/>
            <button type="submit">Submit</button>
        </form>

Answer 1

您可以使用隐藏其中一个表单的方法。

​

$("#switchForm").click(function(){
  const isLoginVisible = $("#login_form").is(':not(:hidden)');
  if(isLoginVisible) {
    $("#login_form").hide();
    $("#register_form").show();
    $("#switchForm > p").html("Already member? Login now!");
  } else {
    $("#login_form").show();
    $("#register_form").hide();
    $("#switchForm > p").html("Not yet a member? Register now!");
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundLogin">
<fieldset>
   <form id="login_form" name="login" method="post" action="./Login.php">
         <p id="title">
            Connect-a-Cutie Login
         </p>
         <p id="email">
            <label> Email:</label>
            <input type="text" name="email" placeholder="Type your email...">
         </p>
         <p id="password">
            <label>Password:</label>
            <input type="text" name="password" placeholder="Type your password...">
         </p>
         <button href="./LoginPage.php" type="submit">Submit!</button>
         <p>
   </form>
   <form id="register_form" action="RegistrationPage.php" method="POST" style="display: none;">
      Name: <input type="text" name="name" placeholder="Enter your name..."/><br/>
      Email: <input type="text" name="email" placeholder="Enter your email..."/><br/>
      Password: <input type="text" name="password" placeholder="Enter your password..."/> (make sure no one is looking...)<br/>
      Addess: <input type="text" name="address" placeholder="Enter your address..."/><br/>
      Do you want to be an admin? <input type="text" name="isAdmin" placeholder="TRUE or FALSE"/><br/><br/>
      <button type="submit">Submit</button>
   </form>
   <a id="switchForm" href="#">
  <p>Not yet a member? Register now!</p></a>
  </fieldset>
</div>

​

我想这会满足你的期望。

Answer 2

试试看！:)

​

$('.login-form a.show-register-form').click(function(){
  $('.login-form').hide();
  $('.register-form').show();  
});
$('.register-form a.show-login-form').click(function(){
  $('.register-form').hide(); 
  $('.login-form').show(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundLogin">
    <form name="login" method="post" action="./Login.php"  class="login-form">
       <fieldset>
          <p id="title">
             Connect-a-Cutie Login
          </p>
          <p id="email">
             <label> Email:</label>
             <input type="text" name="email" placeholder="Type your email...">
          </p>
          <p id="password">
             <label>Password:</label>
             <input type="text" name="password" placeholder="Type your password...">
          </p>
             <button href="./LoginPage.php" type="submit">Submit!</button>
          <p>
             <a href="#" class="show-register-form"><p>Not yet a member? Register now!</p></a>
       </fieldset>
    </form>
    
    <form action="RegistrationPage.php" method="POST" class="register-form" style="display:none;">
    Name: <input type="text" name="name" placeholder="Enter your name..."/><br/>
    Email: <input type="text" name="email" placeholder="Enter your email..."/><br/>
    Password: <input type="text" name="password" placeholder="Enter your password..."/> (make sure no one is looking...)<br/>
    Addess: <input type="text" name="address" placeholder="Enter your address..."/><br/>
    Do you want to be an admin? <input type="text" name="isAdmin" placeholder="TRUE or FALSE"/><br/>   
    <button type="submit">Submit</button>
    <a href="#" class="show-login-form"><p>have user?, login here!</p></a>
</form>
    
 </div>

​