Sweetalert2 在表单内无法正常工作答案

【问题标题】：Sweatalert2 is not working properly inside the formSweetalert2 在表单内无法正常工作
【发布时间】：2019-05-18 18:57:39
【问题描述】：

我正在使用汗水警报 2，当提交的表单汗水警报 2 即将到来但它通过任何按下按钮（确定按钮）关闭时它关闭得非常快。但是当我在没有表单的简单按钮中使用时，它可以正常工作。

const sweatalert = () => {
  return Swal('Good job!','You clicked the button!','success')
}

<!-- Include sweet alert 2. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.4/sweetalert2.all.min.js"></script>

<form action="" method="post" enctype="multipart/form-data">
  <input 
    type="submit" 
    name="addrecord" 
    class="btn btn-primary" 
    onclick="sweatalert()" 
    style="margin-left:100px;"
    value="Add Record"
  />
</form>

<!-- Just here for visual purpose. -->
<hr/>
  
<p>Out side the form is OK.</p>
<input 
  type="submit" 
  name="addrecord" 
  class="btn btn-primary" 
  onclick="sweatalert()" 
  style="margin-left:100px;" 
  value="Add"
/>

【问题讨论】：

仅供参考，它是 sweetalert2

标签： javascript php jquery html css

【解决方案1】：

这是因为当您单击按钮时表单正在提交。这意味着页面将刷新，并删除生成的警报。您可以使用e.preventDefault() 来阻止提交。您还需要确保在您的onclick 回调中传递event：

onclick="sweatalert(event)"

请看下面的例子：

function sweatalert(e) {
  e.preventDefault(); // stop default functionality of submission (ie. page refresh and data post)
  swal(
    'Good job!',
    'You clicked the button!',
    'success'
  )
}

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
  <button type="submit" name="addrecord" class="btn btn-primary" onclick="sweatalert(event)" style="margin-left:100px;">Add Record</button>
</form>

但是，请注意：这将停止提交表单。如果您想提交表单，然后在将数据提交到 PHP 后显示警报，您应该使用 AJAX。如果您使用jQuery，您可以使用$.post 或$.ajax 方法将您的数据发送到PHP，然后使用一个回调函数，如果您的数据提交成功将调用该函数。

【讨论】：

现在，它正在工作，但表单没有提交，我正在使用 jquery 和 php，所以即使我更改了方法 method=$.post 但它不起作用以及如何制作，我必须做什么回调函数。
@Ahmad 这本身就是一个很大的问题。我建议您对如何在 PHP 中使用 $.post 进行一些研究。查看this 问题和答案以获得更多说明，并查看jQuery 的\$.post 和$.ajax 文档。

【解决方案2】：

Swal 返回一个承诺。因此，您需要阻止默认提交事件并使用.then()，您可以在submit() 表单中使用：

const sweatalert = (ele, evt) => {
    evt.preventDefault();
    Swal('Good job!','You clicked the button!','success').then((result) => {
                ele.closest('form').submit();  // get the closest form and submit
            });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.4/sweetalert2.all.min.js"></script>


<form action="" method="post" enctype="multipart/form-data">
    <input
            type="submit"
            name="addrecord"
            class="btn btn-primary"
            onclick="sweatalert(this, event)"  
            style="margin-left:100px;"
            value="Add Record"
            />
</form>

【讨论】：