Bootstrap Modal框在我提交表单时没有提交表单数据而没有在数据库中插入

Question

嗨大家正面临的问题是，在bootstarp模式中，当我点击提交按钮或形成它没有在数据库中插入数据但使用表单中的确定按钮我需要在引导模式应该自动关闭时将数据提交到数据库。任何帮助先谢谢你们。

码：

<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” - 事件。相反，您应该在按钮上绑定click事件：

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

然后，获取这样的值并通过ajax发送：

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