按提交后返回模态

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提交数据，并成功提交后应重置表单，而不是重新加载整个页面。