表单提交不等待 Sweet Alert 确认

Question

表单提交不等待 Sweet Alert 确认

3

我有一份 CRUD 代码，希望能添加 Sweet Alert 确认框。但是我只想在创建表单中添加它。很明显很简单，我只想要这样的流程：

输入数据
点击提交按钮
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;
  }
});

});

实际上，脚本是可用的，sweet alert也已经出现了，但是表单在没有给我确认的机会之前就已经提交了，我尝试了每一个教程，但都没有起作用。

- Z. Norz

警告是异步运行的，因此您基本上要这样说：显示警报，完成提交（提交），等待用户输入，在用户单击警报的“是”后防止默认操作（没有效果）。您需要将 event.preventDefault() 放在 swal() 外部，然后通过代码发布表单（或将警报移出提交方法）。 - freedomn-m

3个回答

1

为了解决这个问题，您需要在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>

- Rory McCrossan

谢谢之前的帮助，表单提交工作正常，但是当我点击“是”按钮时，没有任何反应，就像卡住了一样。 - Z. Norz

@Z.Norz，您想在哪个“控制器”“函数”中发布这些数据？ - Vijay Sharma

我收到了这个错误：未知参数“closeOnConfirm” setParameters @ sweetalert2.js:486 modalDependant @ sweetalert2.js:806 sweetAlert @ sweetalert2.js:1403 （匿名）@ create:387 dispatch @ jquery-3.2.1.min.js:3 q.handle @ jquery-3.2.1.min.js:3 - Z. Norz

那我该怎么办呢？ - Z. Norz

删除该属性。 - Rory McCrossan

显示剩余7条评论

0

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

- misha berelidze

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rahul Pawar · Accepted Answer

在提交之前使用before submit而不是像下面这样使用submit函数

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