按提交後返回模態

Question

嘿傢伙我目前有問題與我的莫代爾。當我註冊一個會員時，註冊成功後它不會回到模態。我相信這與腳本有關。下面的代碼：

<a href="#addMemberModal" class="btn btn-default btn-lg" data-toggle="modal">Add Member</a> 

    <!-- Add Member Modal --> 
    <div id="addMemberModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h4 class="modal-title">Add Member</h4> 
       </div>    

       <div class="modal-body">          
       <div class="col-md-6 col-sm-6 no-padng"> 
        <div class="model-l">      
       <form name="registration" method="post"> 
       <table border="0" width="500" align="center" class="demo-table"> 
        <div class="message"><?php if(isset($message)) echo $message; ?></div> 
         <tr> 
          <td><p class="textColor">First Name:</p></td> 
          <td><input type="text" class="demoInputBox" name="firstName" placeholder="First Name" value="<?php if(isset($_POST['firstName'])) echo $_POST['firstName']; ?>"; required></td> 
         </tr> 
         <tr> 
          <td><p class="textColor">Family Name:</td> 
          <td><input type="text" class="demoInputBox" name="lastName" placeholder="Family Name" value="<?php if(isset($_POST['lastName'])) echo $_POST['lastName']; ?>"; required></td> 
         </tr> 
         <tr> 
          <td><p class="textColor">Contact</td> 
          <td><input type="text" class="demoInputBox" name="contact" placeholder="Contact No." value="<?php if(isset($_POST['contact'])) echo $_POST['contact']; ?>"; required></td> 
         </tr> 
         <tr> 
          <td><p class="textColor">Email</td> 
          <td><input type="text" class="demoInputBox" name="email" placeholder="Email" value="<?php if(isset($_POST['email'])) echo $_POST['email']; ?>"; required></td> 
         </tr> 
         <tr> 
          <td><p class="textColor">Gender</td> 
          <td><input type="radio" name="gender" value="M" <?php if(isset($_POST['gender']) && $_POST['gender']=="Male") { ?>checked<?php } ?>><p class="textColor"; required>Male</p> 
          <br><input type="radio" name="gender" value="F" <?php if(isset($_POST['gender']) && $_POST['gender']=="Female") { ?>checked<?php } ?>><p class="textColor"; required>Female 
          </td> 
         </tr> 
         <tr> 
         <td></td> 
         </tr> 

       </table> 
        <div> 
         <input type="submit" name="submit" value="Add Member" class="btnRegister"> 
       </div> 
      </form> 
         </div> 
         </div> 

         <div class="clearfix"></div> 
        </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 
</div> 

我願意接受的答案，因爲自舉模態沒有被我們學校從教你們學習的經驗以及。如果有人能幫助我，我會很高興。非常感謝！ :)

Answer 1

第一件事：
我真的不明白，爲什麼你用value="<?php echo $_POST['value']?>"與每一個輸入型它的作用是，它填補了與所提交的數據表單輸入。如果您從每種輸入類型中刪除此value="<?php echo $_POST["firstName"] ?>"，則只需使用以下代碼觸發模式。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     //check whether user form submitted 
     var test ="<?php echo $_POST["submit"] ?>"; 

     //check if form is submmited 
     if(test){ 
      $("#addMemberModal").modal("show"); 
     } 
    }); 
</script> 

如果你還是不希望刪除value="<?php echo $_POST['value']?>"。然後嘗試以下操作：

<script type="text/javascript"> 

    $(document).ready(function(){ 
     //check whether user form submitted 
     var test ="<?php echo $_POST["submit"] ?>"; 

     // function for clearing input 
     $.clearInput = function (modal) { 
      $(modal).find('input[type=text], input[type=radio]').val(""); 
     }; 

     //check if form is submmited 
     if(test){ 

      // //show the modal 
      $("#addMemberModal").modal("show"); 

      //on modal show clear the inputs 
      $("#addMemberModal").on("shown.bs.modal",function(){ 

       $.clearInput(this); 
      }); 
     } 
    }); 

</script> 

對於上述的任何情況下工作，你還需要包括jQuery的在head部分：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

注：上面的代碼將正常運行根據您的要求，但這是不是推薦的方法。如果你想一次又一次地添加新成員信息，你應該通過JQuery或Ajax提交數據，併成功提交後應重置表單，而不是重新加載整個頁面。