javascript - 更改放置在模态页脚中的按钮的任务

Question

我有一个模态。在模式的标题中，我的标题是登录。在正文中我有一个登录表单，在页脚中我有登录按钮。

在登录按钮之后，我为那些想要创建帐户的人提供了一个超文本，通过单击它，登录表单会消失并出现注册表单。

我是否可以使用相同的按钮来登录注册。 (用最简单的话来说，是否可以在两种不同的表单中使用相同的按钮，或者如果不能，我如何向页脚添加一个按钮并使其充当重申表单的提交按钮)

<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"/>