如何在使用jQuery阻止之後繼續提交表單？

Question

如何在使用jQuery阻止之後繼續提交表單？

例如：
有一個刪除input元素：

<form action="/articles/{{ $article->id }}" method="POST"> 
    {{ method_field('DELETE') }} 
    {{ csrf_field() }} 
    <input class="btn btn-danger btn-sm need-alert" type="submit" value="delete"> 
</form> 

我想提交表單之前給用戶一個sweetalert2警報。

Javascript code:

<script> 
    $('.need-alert').on('click', function (event) { 

     event.preventDefault(); 

     //sweetalert2 code 
     swal({ 
      title: 'Are you sure?', 
      text: "You won't be able to revert this!", 
      type: 'warning', 
      showCancelButton: true, 
      confirmButtonColor: '#3085d6', 
      cancelButtonColor: '#d33', 
      confirmButtonText: 'Yes, delete it!' 
     }).then(function() { 

      //... 

     }).catch(swal.noop); 
    }) 
</script> 

的sweetalert2警告框可以正確顯示。

問：
如何繼續單擊sweetalert2提示框的確定按鈕後，提交表單？

Answer 1

你可以用jQuery's submit function來做到這一點。

<form id="deleteForm" action="/articles/{{ $article->id }}" method="POST"> 
    {{ method_field('DELETE') }} 
    {{ csrf_field() }} 
    <input class="btn btn-danger btn-sm need-alert" type="submit" value="delete"> 
</form> 

<script> 
    $('.need-alert').on('click', function (event) { 

     event.preventDefault(); 

     //sweetalert2 code 
     swal({ 
      title: 'Are you sure?', 
      text: "You won't be able to revert this!", 
      type: 'warning', 
      showCancelButton: true, 
      confirmButtonColor: '#3085d6', 
      cancelButtonColor: '#d33', 
      confirmButtonText: 'Yes, delete it!' 
     }).then(function() { 
      $('#deleteForm').submit(); 
     }).catch(swal.noop); 
    }) 
</script> 

處理提交事件而不是點擊刪除按鈕甚至更好。如果用戶使用鍵盤導航到按鈕，則不會顯示確認。您可以通過執行解決這個問題：

$(document).ready(function() { 
 
     var form = $("#deleteForm"); 
 
     // keep track of the swall popup answer. 
 
     var isConfirmed = false; 
 

 
     form.submit(function (event) { 
 
      // If answered "ok" previously continue submitting the form. 
 
      if (isConfirmed) { 
 
       return true; 
 
      } 
 

 
      // Confirm is not ok yet so prevent the form from submitting and show the message. 
 
      event.preventDefault(); 
 

 
      //sweetalert2 code 
 
      swal({ 
 
       title: 'Are you sure?', 
 
       text: "You won't be able to revert this!", 
 
       type: 'warning', 
 
       showCancelButton: true, 
 
       confirmButtonColor: '#3085d6', 
 
       cancelButtonColor: '#d33', 
 
       confirmButtonText: 'Yes, delete it!' 
 
      }).then(function (confirmed) { 
 
       isConfirmed = confirmed; 
 
       form.submit(); 
 
      }).catch(swal.noop); 
 
     }); 
 
    });

<link href="https://cdn.jsdelivr.net/sweetalert2/4.0.5/sweetalert2.min.css" rel="stylesheet"/> 
 
<script src="https://cdn.jsdelivr.net/sweetalert2/4.0.10/sweetalert2.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="deleteForm" action="/articles/{{ $article->id }}" method="POST"> 
 
    <!-- {{ method_field('DELETE') }} 
 
    {{ csrf_field() }} --> 
 
    <input class="btn btn-danger btn-sm need-alert" type="submit" value="delete"> 
 
</form>