Close Modal bootstrap window after insert in database

Question

I have modal bootstrap window that insert data in database using AJAX and JQUERY but I couldn't close window after insert and I want also to show message like Successfully inserted see below code

---- modal window ----

    <!-- Modal  employer-->
<div class="modal fade" id="employer" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">

                </h4>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">

                <form role="form" action='insert.php' method='post' id='myform'>
                  <div class="form-group">
                    <label for="exampleInputEmail1">Nom</label>
                      <input type="text"  name="nom"class="form-control"
                      id="exampleInputEmail1" placeholder="Nom"/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Prenom</label>
                      <input type="text" name="prenom" class="form-control"
                          id="exampleInputPassword1" placeholder="Prenom"/>
                  </div>
                                    <div class="form-group">
                    <label for="exampleInputPassword1">telephone</label>
                      <input type="text" name="telephone"class="form-control"
                          id="exampleInputPassword1" placeholder="telephone"/>
                  </div>
      <div class="form-group">
                    <label for="exampleInputPassword1">Fonction</label>
                      <input type="text" name="fonction" class="form-control"
                          id="exampleInputPassword1" placeholder="Fonction"/>
                  </div>
                      <div class="form-group">
                    <label for="exampleInputPassword1">Salire</label>
                      <input type="text" name="salaire" class="form-control"
                          id="exampleInputPassword1" placeholder="Salire"/>
                  </div>




            </div>

            <!-- Modal Footer -->
            <div class="modal-footer">

                <button type="button" id='insert' class="btn btn-primary">
                    Save changes
                </button>
                  </form>
            </div>
        </div>
    </div>
</div>

---- insert.php ----

<?php
require('config.php');
 $nom = $_POST['nom'];
 $prenom = $_POST['prenom'];
  $telephone = $_POST['telephone'];
   $fonction = $_POST['fonction'];
    $salaire = $_POST['salaire'];
 $sql = "insert into employer (nom, prenom,telephone,fonction,salaire) values ('$nom','$prenom','$telephone','$fonction','$salaire')";

 if(mysqli_query($con, $sql)){
 echo 'success';
?>



 <script type="text/javascript">
$(document).ready(function(){

        $('#employer').modal('hide');

});
</script>
 <?php

  }
?>

---- insert.js----

 $('#myform').submit(function(){
    return false;
});

$('#insert').click(function(){
    $.post(     
        $('#myform').attr('action'),
        $('#myform :input').serializeArray(),
        function(result){
            $('#result').html(result);
        }
    );
});

Answer 1

Try this:

$('#modal').modal('close');

It will close the modal.

Answer 2

When you get your response from ajax request then close modal window.

    $('#employer').modal('hide');

As according to your example:

$('#insert').click(function(){
    $.post(     
        $('#myform').attr('action'),
        $('#myform :input').serializeArray(),
        function(result){
            $('#employer').modal('hide'); // ADD CODE FOR CLOSE MODAL
            $('#result').html(result);
        }
    );

});