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.