نمایش پیام «آیا مطمین هستید» قبل از سابمیت submit فرم در جی کوئری jquery چگونه است؟

سلام دوستان من یه فرمی دارم که میخوام با جی کوئری ارسالش کنم زمانی که کاربر روی باتن فرم کلیک میکنه یه sweet alert نمایش داده میشه, که دوتا باتن داره (تایید و انصراف) در صورتی که روی تایید کلیک کنه فرم ارسال میشه و انصراف هم که تنها اون الرت بسته میشه و کار دیگه ای قرار نیست انجام بده اما مشکل اینجاست که اگه من روی انصراف یا هرجا دیگه از صفحه هم کلیک کنم باز هم فرم ارسال میشه این کدشه ممنون میشم بررسی کنید

jQuery(document).ready(function(){
    jQuery('#verifyDoc').on('click', function(event){
       event.preventDefault();
      swal({
        title: "",
        text: "آیا مطمئن هستید که می‌خواهید این کار را انجام دهید؟",
        type: "info",
        showCancelButton: true,
            buttonsStyling: true,
        confirmButtonText: "تایید",
        cancelButtonText: "انصراف",
      }).then(function(isConfirm){
            if(isConfirm){
                               jQuery("#verifyDocForm").submit();  
            }
      });
    });
});

و کد html

<form action="{{route('admin.auth.document.update' , [$document->id])}}" id="verifyDocForm" method="post">
    {{ csrf_field() }} {{method_field('PATCH')}}
    <input type="hidden" name="actionCode" value="1">
    <button type="submit" class="btn btn-success">تایید مدارک</button>
</form>

از نظر من بهتره که الگوریتم برنامه رو تغییر بدی. تو الان داری این کار رو میکنی:

وقتی روی دکمه #verifyDoc کلیک شد، یه پاپ آپ نمایش بده واسه مطمین شدن و اگه اوکی بود، فرم #verifyDocForm رو سابمیت کن.

که میتونه این فرایند بهتر اتفاق بیوفته اگه الگوریتم برنامه به این شکل اتفاق بیوفته:

وقتی عملیات سابمیت فرم #verifyDocForm میخواست انجام بشه، بیا یک پاپ آپ قبلش نشون بده واسه مطمین شدن، بعد اگه طرف مطمین بود، خب به ادامه عملیات سابمیت شدن فرم ادامه بده، در غیر این صورت، عملیات رو متوقف کن.

که به زبان کد اینطوری میشه:

• روش اول (ساده) با استفاده از تابع confirm():

jQuery(document).ready(function(){
    jQuery("#verifyDocForm").on('submit', function(){
        return confirm("آیا مطمئن هستید که می‌خواهید این کار را انجام دهید؟");
    });
});

• روش دوم (همون روش خودت) با استفاده از تابع کتابخونه sweet alert:

jQuery(document).ready(function(){
    jQuery('#verifyDoc').on('click', function(event){
       event.preventDefault();
      swal({
        title: "",
        text: "آیا مطمئن هستید که می‌خواهید این کار را انجام دهید؟",
        type: "info",
        showCancelButton: true,
            buttonsStyling: true,
        confirmButtonText: "تایید",
        cancelButtonText: "انصراف",
      }).then(function(isConfirm){
            if(isConfirm){
               jQuery("#verifyDocForm").submit();  
            } else {
               swal("کنسل شد", "فرایند متوقف شد.", "error");
            }
      });
    });
});

نمونه عملی

نکات مورد نیاز:

1. توی روش اولی که نوشتم، return confirm(); یک بولین boolean برمیگردونه (که نتیجه همون پاپ آپ هست) ، true بود، به کارت ادامه بده و فرم رو سابمیت کن، اگه false بود، خب ادامه فرایند سابمیت شدن رو متوقف کن.

2. دکمه ای که این فرم رو سابمیت می کنه باید نوعش سابمیت باشه: type="submit". (دارم در مورد HTML صحبت میکنم)

این کد رو امتحان کن:

jQuery(document).ready(function(){
    jQuery('#verifyDoc').on('click', function(event){
      swal({
        title: "",
        text: "آیا مطمئن هستید که می‌خواهید این کار را انجام دهید؟",
        type: "info",
        showCancelButton: true,
            buttonsStyling: true,
        confirmButtonText: "تایید",
        cancelButtonText: "انصراف",
      }).then(function(isConfirm){
            if(!isConfirm){
               return false;
            }
      });
    });
});

توی جاوا اسکریپت، وقتی میخوای یک فرایندی رو متوقف کنی، یکی از راه کارهاش اینه که از return false; استفاده کنی. این نکته رو هم بگم که اگه event.preventDefault(); رو حذف کنی، فرایند سابمیت submit به صورت پیش فرض اتفاق میوفته و احتیاجی نیست خودت دستی فرم رو .submit(); کنی.