防止使用 SweetAlert 提交表單

Question

我的目標是僅在用戶在 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 文檔對我沒有幫助）。

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

Answer 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();
   });  
  });
 });
});