submitを押した後にモーダルに戻ります。

Question

私は現在Modalに問題があります。私はメンバーを登録するので、登録に成功した後はモーダルに戻りません。私はそれがスクリプトと関係があると信じています。ここでは、コードです：

<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']?>" .Thenは、次のことを試して削除したくない場合は、次のような場合のいずれかの

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

もお仕事headセクションでのjQueryを含める必要がありしました：

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

注：として動作するはず上記のコードあなたの要件ごとにこれはです推奨されない方法です。 に新しいメンバーの情報を何度も追加したい場合は、JQueryまたはAjax投稿を介してデータを提出し、ページ全体を再読み込みするのではなくフォームをリセットする必要があります。