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

试试看！：）

$('.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>

Answer 2

您可以使用隐藏其中一种形式的方法。

$("#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>

我认为它将满足您的期望。

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

2 个答案: