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>

我很乐意接受你们的答案和学习课程，因为我们学校没有教授Boostrap Modal。如果有人能帮助我，我会很高兴的。非常感谢！：）

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>

对于上述任何一种情况，您还需要在head部分中包含Jquery：

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

注意：以上代码应按照您的要求运行，但这是不推荐的方法。如果您想一次又一次地添加新成员信息，您应该通过JQuery或Ajax帖子提交数据，并且成功提交时应该重置表单，而不是重新加载整个页面。

按提交后返回模态

1 个答案: