Form Submit Not Wait For Sweet Alert Confirm

Viewed 7213

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.

3 Answers

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

Related