表單提交不等待甜蜜警報確認

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>