Динамически изменить 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>