Form Submit Not Wait For Sweet Alert Confirm

Question

I have CRUD and want to add confirmation box with Sweet Alert. But I just add it to Create Form. Clearly simple, I just wanna like this :

• Input Data
• Click Submit Button
• Sweet Alert confirmation appear
• Click 'Yes'
• Data store to database
• Return to Read table

This my code :

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

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

});

Actually, the script is working, the sweet alert has appeared also, but the form Submitted ahead without giving me a chance to confirm that, I've tried every tutor but not once working.

Answer 1

Use before submit instead of submit function like below

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

Answer 2

To fix this issue you need to always stop the default behaviour of the submit event handler in your jQuery code.

You can then submit the form from the DOM Element directly in the if statement when the user confirms their choice, like this:

$("#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>

Answer 3

<script type="text/javascript" charset="utf-8">
$('form').submit(function (e) {
   var form = this;
   e.preventDefault();
   setTimeout(function () {
    form.submit();
   }, 5000);
   $(Swal.fire({
      html: "<h5 style='color:#099942;font-weight:600;'>your text here...</h5>",
      showCancelButton: false,
      showConfirmButton: false
      })).appendTo("body");
});
</script>