モーダルのフッターに配置されたボタンのタスクを変更します

Question

私はモーダルです。モーダルのヘッダーには、ログインするタイトルがあります。私はログインフォームを持っていて、フッターにはログインボタンがあります。

ログインボタンの後に、アカウントを作成したい人のためのハイパーテキストがあります。ハイパーテキストをクリックするとログインフォームが消え、登録フォームが表示されます。

ログインに同じボタンを使用する可能性はありますか？ （最も単純な言葉では、2つの異なるフォームで同じボタンを使用することは可能ですか、できない場合は、ボタンをフッターに追加して繰り返しフォームの送信ボタンとして機能させるにはどうすればいいですか）

<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header" style="background-color: #222"> 
       <div class="mu-title"> 
       <span class="mu-subtitle" id = "loginTitle">Login</span> 
     </div> 
    </div> 
    <!-- Body of the modal --> 
    <div class="modal-body" style="background-color: #222"> 

         <form id="registerForm" method="POST" action="register.php" novalidate="novalidate" style="display: none"> 
          <div class="form-group"> 
           <label for="name" class="control-label" style="color: white">Full Name</label> 
           <input type="text" class="form-control" id="fullName" name="fullName" value="" required="" title="Please enter you full name" placeholder="Full Name"> 
           <span class="help-block"></span> 
          </div> 
          <div class="form-group"> 
           <label for="username" class="control-label" style="color: white">Username</label> 
           <input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="username@siswa.um.edu.my"> 
           <span class="help-block"></span> 
          </div> 
          <div class="form-group"> 
           <label for="password" class="control-label" style="color: white">Password</label> 
           <input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password"> 

          </div> 
          <div class="form-group"> 
           <label for="matrix" class="control-label" style="color: white">Matrix Number</label> 
           <input type="text" class="form-control" id="matrixNO" name="matrixNO" value="" required="" title="Please enter you Matrix Number" placeholder="Matrix Number "> 
           <span class="help-block"></span> 
          </div> 
         </form> 

         <form id="loginForm" method="POST" action="login.php" novalidate="novalidate"> 
          <div class="form-group"> 
           <label for="username" class="control-label" style="color: white">Username</label> 
           <input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="username@siswa.um.edu.my"> 
           <span class="help-block"></span> 
          </div> 
          <div class="form-group"> 
           <label for="password" class="control-label" style="color: white">Password</label> 
           <input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password"> 

          </div> 
    </div> 

    <div class="modal-footer" style="background-color: #222"> 
      <button type="submit" id ="loginButt" class="mu-readmore-btn">Login</button></br></br> 
      </form> 
      <span style="color: white" >Create an <a href= "#" style="color: white" onClick="$('#loginForm').hide();$('#registerForm').show(); " >Account</a> </span> 

    </div> 
    </div> 

Answer 1

は、単にことを確認して...あなたが行うことができますあなたが試すことができますいくつかのボイラープレート....（あなたの部分だけで基本的にアクティブなフォームを決定することです...）

$(document).ready(function(){ 
 
    $('#submitbtn').click(function(e){ 
 
    e.preventDefault(); 
 
    var form=$('#currentForm').val(); 
 
    if(form=="login") 
 
     { 
 
     alert('submit to login'); 
 
     } 
 
    else 
 
     { 
 
     alert('submit to register'); 
 
     } 
 
    }); 
 
    $('#btnchange').click(function(){ 
 
    var form=$('#currentForm').val(); 
 
    if(form=="login") 
 
     { 
 
     $('#currentForm').val('register'); 
 
     $('#registration-form').show(); 
 
     $('#login-form').hide(); 
 
     } 
 
    else 
 
     { 
 
     $('#currentForm').val('login'); 
 
     $('#registration-form').hide(); 
 
     $('#login-form').show(); 
 
     } 
 
    }); 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<form method="post" action="register.php" name="registration-form" id="registration-form" style="display:none;"> 
 
    <label for="name">Name:</label> 
 
    <input type="text" name="usename"><br/> 
 
    <label for="emailid">Email ID:</label> 
 
    <input type="text" name="emailid"><br/> 
 
    <label for="password">Password :</label> 
 
    <input type="password" name="password"> 
 
</form><br/><br/> 
 
<form method="post" action="login.php" name="login-form" id="login-form"> 
 
    <label for="emailid">Email ID :</label> 
 
    <input type="text" name="emailid"> 
 
    <label for="password">Password :</label> 
 
    <input type="password" name="password"> 
 
</form> 
 
<input type="hidden" value="login" id="currentForm"/> 
 
    <input type="button" value="Submit" name="submitbtn" id="submitbtn"> 
 
<input type="button" value="Toggle Form" id="btnchange"/>  
 

Answer 2

あなたの質問をちょっと理解しています。あなたがしようとしていることの基本的な考え方は次のとおりです。

シングルページモーダル、ユーザーのテキスト入力を受け取り、その情報を持つ既存のユーザーを確認し、存在しない場合は新規ユーザーを作成しますか？ここで