表单提交不等待甜蜜警报确认

Question

我有CRUD并希望添加Sweet Alert的确认框。但我只是将它添加到创建窗体。显然，简单的，我就是这样想：

• 输入数据
• 点击提交按钮
• 甜警报确认出现
• 点击“是”
• 数据存储到数据库
• 返回阅读表

这是我的代码：

<!-- Form --> 
<form role="form" method="post" class="form-horizontal" id="tmbhunit" action="<?= base_url() ?>C_unit/create"> 
<!-- Card Icon --> 
<div class="card-header card-header-icon" data-background-color="red"> 
    <i class="material-icons">account_balance</i> 
</div> 
<!-- End Card Icon --> 

<!-- Card Content --> 
<div class="card-content"> 
    <!-- Card Title --> 
    <h4 class="card-title">Tambah Data</h4> 
    <!-- End Card Title --> 
    <hr> 

    <!-- Label Input --> 
    <div class="row"> 
     <label class="col-sm-2 label-on-left" for="namaunit">Nama Unit</label> 
     <div class="col-sm-4"> 
      <div class="form-group label-floating is-empty"> 
       <label class="control-label"></label> 
       <input type="text" class="form-control" id="namaunit" name="nm_unit" required placeholder="Masukan nama unit.."> 
      </div> 
     </div> 
    </div> 
    <!-- End Label Input --> 
    <!-- Label Input --> 
    <div class="row"> 
     <label class="col-sm-2 label-on-left" for="almtunit">Alamat Unit</label> 
     <div class="col-sm-4"> 
      <div class="form-group label-floating is-empty"> 
       <label class="control-label"></label> 
       <input type="text" class="form-control" id="almtunit" name="alamat" required placeholder="Masukan alamat unit.."> 
       <br> 
       <input type="submit" name="submit" id="btn-submit" class="btn btn-primary btn-fill" value="Tambah" /> 
       <input type="button" name="cancel" class="btn btn-warning btn-fill" value="Cancel" onclick="history.back()" /> 
      </div> 
     </div> 
    </div> 
    <!-- End Label Input --> 

</div> 
<!-- End Card Content --> 
</form> 
<!-- End Form --> 

这是JavaScript的：

$("#tmbhunit").submit(function() { 

var nm_unit = $("#namaunit").val(); 
var almtunit = $("#almtunit").val(); 

swal({ 
    title: "Are you sure?", 
    type: "warning", 
    showCancelButton: true, 
    confirmButtonColor: "#DD6B55", 
    confirmButtonText: "Yes!", 
    cancelButtonText: "Cancel", 
    closeOnConfirm: true 
}, function(isConfirm){ 
    if (isConfirm) { 
    event.preventDefault(); 
     return true; 
    } else { 
    return false; 
    } 
}); 

}); 

实际上，脚本运行，甜警报已经出现还可以，但提前提交不给我一个机会，以确认表，我已经想尽导师，但没有一次工作。

Answer 1

使用之前提交，而不是提交功能，如下图所示

jQuery("body").on("beforeSubmit", "form#tmbhunit", function() { 
    // You logic 
    return false; 
}); 

Answer 2

要解决这个问题，你需要总是停在你的jQuery代码的submit事件处理程序的默认行为。

然后，您可以直接从DOM元素提交表单的if声明当用户确认自己的选择，像这样：

$("#tmbhunit").submit(function(e) { 
 
    e.preventDefault(); 
 
    var nm_unit = $("#namaunit").val(); 
 
    var almtunit = $("#almtunit").val(); 
 
    var form = this; 
 

 
    swal({ 
 
    title: "Are you sure?", 
 
    type: "warning", 
 
    showCancelButton: true, 
 
    confirmButtonColor: "#DD6B55", 
 
    confirmButtonText: "Yes!", 
 
    cancelButtonText: "Cancel", 
 
    closeOnConfirm: true 
 
    }, function(isConfirm) { 
 
    if (isConfirm) { 
 
     form.submit(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" /> 
 
<form role="form" method="post" class="form-horizontal" id="tmbhunit" action="<?= base_url() ?>C_unit/create"> 
 
    <div class="card-header card-header-icon" data-background-color="red"> 
 
    <i class="material-icons">account_balance</i> 
 
    </div> 
 

 
    <div class="card-content"> 
 
    <h4 class="card-title">Tambah Data</h4> 
 
    <hr> 
 
    <div class="row"> 
 
     <label class="col-sm-2 label-on-left" for="namaunit">Nama Unit</label> 
 
     <div class="col-sm-4"> 
 
     <div class="form-group label-floating is-empty"> 
 
      <label class="control-label"></label> 
 
      <input type="text" class="form-control" id="namaunit" name="nm_unit" required placeholder="Masukan nama unit.."> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <label class="col-sm-2 label-on-left" for="almtunit">Alamat Unit</label> 
 
     <div class="col-sm-4"> 
 
     <div class="form-group label-floating is-empty"> 
 
      <label class="control-label"></label> 
 
      <input type="text" class="form-control" id="almtunit" name="alamat" required placeholder="Masukan alamat unit.."> 
 
      <br> 
 
      <input type="submit" name="submitBtn" id="btn-submit" class="btn btn-primary btn-fill" value="Tambah" /> 
 
      <input type="button" name="cancelBtn" class="btn btn-warning btn-fill" value="Cancel" onclick="history.back()" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>