Bootstrap Modal box not submitting the form data while i was submitting the form and not insert in database

Question

Hi guys am facing the issue that in bootstarp modal when i click submit button or form it not insert the data in database but using the ok button in form i need to submit the data into database at time the bootstrap modal should close automatically.any help thanks in advance guys.

code:

<button type="button"  class="btn btn-primary  pubg" data-toggle="modal" data-target="#overlay" id="label"> Launch demo modal </button>
<div class="modal fade" id="overlay" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <center> <b> Mr. jones </b></center>
            <form id="submitApprove" method="post" >
                <div class="form-group ">
                    <input type="text" name="user_name" />
                </div>
                <div class="form-group ">
                    <input type="text" name="useremp_id"  />
                </div> 
                <input type="submit" class="btn btn-secondary" name="submit"  value="OK"  >
            </form>
    </div>
</div>

javascript:

<script>
var modalActive = false;
function time() { 
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  $("#label").html(h+":"+m+":"+s)

  if(!modalActive && (h == 10 && m == 39 )){
      modalActive = true;
      $('#overlay').modal('show');
  }

  if(modalActive && (h == 10 && m == 40 )){
      modalActive = false;
      $('#overlay').modal('hide');
  }

}
setInterval(time, 1000);</script>


     <script>
      var timer = setInterval(time, 50);
      $('#submitApprove').on("submit", function(event) {
       event.preventDefault();
    $.ajax({
       method: "POST",
        url : <?php echo base_url(); ?>uncerr/uncef/booked ,
       data: {"user_name" : $user_name, "user_emp_id" : user_emp_id},
       success: function() {
       $('#overlay').modal( 'hide' );
        clearInterval(timer);
      }
   });
 });
  </script>

new script:

  <script>
   var modalActive = false;
   function time() { 
      var d = new Date();
      var s = d.getSeconds();
     var m = d.getMinutes();
    var h = d.getHours();
     $("#label").html(h+":"+m+":"+s)

      if(!modalActive && (h == 15 && m == 52 )){
       modalActive = true;
        $('#overlay').modal('show');
     }

     if(modalActive && (h == 15 && m == 53 )){
        modalActive = false;
         $('#overlay').modal('hide');
      }

    if(!modalActive && (h == 15 && m == 43)){
       modalActive = true;
        $('#overlays').modal('show');
     }
      if(modalActive && (h==15 && m== 39)){
       modalActive = false;
      $('#overlays').modal('hide');
   }

}
setInterval(time ,1000);
   ('#submitApprove input[type="submit"]').on("click", function(event) {
   // submit form via ajax, then
   event.preventDefault();
  $('#overlay').modal( 'hide' );
  setTimeout(function( ) { clearInterval( time ); }, 5000);
  });

Answer 1

Use submit instead of the click event if you are binding the event to the form. Before making the ajax call, prevent the default form submission behaviour

var timer = setInterval(time, 1000);
$('#submitApprove').on("submit", function(event) {
  event.preventDefault();
  $.ajax({
    method: "POST",
    url: url,
    data: data,
    success: function() {
     $('#overlay').modal( 'hide' );
     clearInterval(timer);
    }
  });
});