防止使用 SweetAlert 提交表单答案

【问题标题】：prevent a form from being submitted with SweetAlert防止使用 SweetAlert 提交表单
【发布时间】：2020-01-27 01:49:06
【问题描述】：

我的目标是只允许用户在 SweetAlert 框上单击“确定”后提交表单。

于是，他点击了一张图片（表单），出现带有一些说明的框，他阅读并点击“确定”，然后提交表单。

这是表单代码：

<form id="formpag" action="https://example.com/request.html" method="post">
<input type="hidden" name="code" value="7055C88A445678A00461CFA120F4A2E7" />
<input type="image" src="https://example.com/buttons/subscriptions/120x53-subscribe.gif" name="submit" alt="Pay with Example.com - it is fast and reliable!" />
</form>

现在是 jQuery/Sweet Alert 部分：

jQuery( document ).ready(function( $ ) {

 $(function() {
   $('#formpag').submit(function() {

   swal({   title: "Be Advised",
            text: "You need to check your email account after payment.",
            imageUrl: "images/thumbs-up.jpg" });        
          });
      });
   });

问题：现在，框正在向用户显示，但几秒钟后，表单正在提交，即使他没有点击 SweetAlert 框上的 OK 按钮。

只有在他点击“确定”后才能提交表格。

任何帮助将不胜感激。（抱歉，我知道这是一个愚蠢的问题，但 SweetAlert 文档对我没有帮助）。

【问题讨论】：

标签： javascript jquery forms sweetalert

【解决方案1】：

您需要阻止默认处理。将您的功能更新为关注

 $('#formpag').submit(function(event) {
    event.preventDefault();
    swal({   title: "Be Advised",
            text: "You need to check your email account after payment.",
            imageUrl: "images/thumbs-up.jpg" });        
     });
 });

供参考 - http://api.jquery.com/event.preventdefault/

【讨论】：

那里不安静。点击“确定”后没有提交表单。
@LuisRock - 您需要将事件绑定到“确定”按钮
好的。我该怎么做？ sweetalert 的代码上没有“确定”按钮。

【解决方案2】：

我已经做到了。我找到了另一个 SweetAlert 代码，更适合我的需要，我可以将它混合到一个 jquery 基本函数中。

这是最终结果：

jQuery( document ).ready(function( $ ) {

$(function() {
  $('#formpag').submit(function() {
    event.preventDefault();

  swal({
    title: "Be advised",
    text: "You need to check your email account after payment.",
    type: "warning",
    showCancelButton: false,
    confirmButtonColor: 'blue',
    confirmButtonText: 'Ok, got it.',
    closeOnConfirm: false,

  },
  function(){
     $('#formpag').submit();
   });  
  });
 });
});

【讨论】：