我有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;
}
});
});
实际上,脚本正在运行,甜蜜警报也出现了,但表格提前提交但没有给我机会确认,我已经尝试过每个导师但没有一次工作。
答案 0 :(得分:2)
要解决此问题,您需要始终停止jQuery代码中submit
事件处理程序的默认行为。
然后,当用户确认他们的选择时,您可以直接在if
语句中从DOM元素提交表单,如下所示:
$("#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();
}
});
});
&#13;
<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>
&#13;
答案 1 :(得分:1)
在提交之前使用而不是像下面的提交功能
jQuery("body").on("beforeSubmit", "form#tmbhunit", function() {
// You logic
return false;
});