javascript - Sweetalert2 在表单内无法正常工作

Question

我正在使用 sweatalert2，当提交的表单 sweatalert2 即将到来但它通过任何按下按钮(确定按钮)关闭时它关闭得非常快。但是当我在没有表单的简单按钮中使用时，它工作正常。

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

Answer 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，然后使用一个回调函数，如果您的数据是提交成功。