Goes back to modal after pressing submit

Question

Hey guys I'm currently having problems with my Modal. As I register a member, it doesn't go back to the modal after successfully registering it. I believe it has something to do with scripts. Here's the code:

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

I'm open to receiving answers and learning lessons from you guys as well because Boostrap Modal isn't being taught in our school. I'll be very happy if somebody will help me with this. Thank you so much! :)

Answer 1

First thing:
I really don't understand why you have used value="<?php echo $_POST['value']?>" with every input type what it does is, it fills form input with the submitted data. If you remove this value="<?php echo $_POST["firstName"] ?>" from every input type, you will only need to trigger the modal using the following code.

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

If You still don't want to remove value="<?php echo $_POST['value']?>" .Then try the following:

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

For any of the above case to work you also need to include Jquery in head section:

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

NOTE: Above code should work as per your requirement but this is not a recommended method . If you want to add new member information again and again, you should submit the data via JQuery or Ajax post and on successful submission should reset the form, instead of reloading the entire page.