Модальное окно начальной загрузки не передает данные формы, пока я отправляю форму, и не вставляется в базу данных.

Question

Привет, ребята, я столкнулся с проблемой, что в модальности начальной загрузки, когда я нажимаю кнопку отправки или формы, она не вставляет данные в базу данных, а с помощью кнопки «ОК» в форме, мне нужно отправить данные в базу данных в то время, когда модал начальной загрузки должен автоматически закрыться. Любая помощь, заранее спасибо, ребята.

код:

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

новый скрипт:

  <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

Используйте submit вместо события click, если вы связываете событие с формой. Перед выполнением Ajax-вызова запретите стандартное поведение отправки формы

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);
    }
  });
});

Answer 2

Вы связываете «onclick» - событие в форме. Вместо этого вы должны связать событие нажатия на кнопку:

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

Затем получите такие значения и отправьте их через ajax:

var id = $('#useremp_id').val()