如何使用 SweetAlert2 捕获表单提交方法

Question

我的javascript知识也很贫乏，请大家帮忙。我正在尝试保护用户页面并添加确认对话框以删除。但我不知道如何捕捉提交方法。我使用来自 sweetalert2 的确认，但不幸的是，表单方法在没有点击任何按钮的情况下运行。

所以我的问题是如何修改代码？

<form action="{{ route('users.destroy', ['user' => \Illuminate\Support\Facades\Auth::id()]) }}" method="post">
    @csrf
    @method('DELETE')
    <button id="comfirm-delete" class="btn btn-danger">User Delete</button>
</form>


<script>
    $(function () {
      'use strict';

      var comfirmDelete = $('#comfirm-delete');

      if (comfirmDelete.length) {
        comfirmDelete.on('click', function() {
          Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'No, cancel!',
            customClass: {
              confirmButton: 'btn btn-primary',
              cancelButton: 'btn btn-outline-danger ml-1'
            },
            buttonsStyling: false
          }).then(function(result) {
            if (result.value) {
              Swal.fire({
                icon: 'success',
                title: 'Deleted!',
                text: '',
                customClass: {
                  confirmButton: 'btn btn-success'
                }
              });
            }
          });
        });
      }

    });
 </script>

Answer 1

方法如下

如果您有多个表单，则需要 class 并缓存表单而不是使用 $('#myForm')

$(function() {
  $('#myForm').on('submit', function(e) {
    e.preventDefault();
    Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, cancel!',
      customClass: {
        confirmButton: 'btn btn-primary',
        cancelButton: 'btn btn-outline-danger ml-1'
      },
      buttonsStyling: false
    }).then(function(result) {
      if (result.value) {
        Swal.fire({
          icon: 'success',
          title: 'Deleted!',
          text: '',
          customClass: {
            confirmButton: 'btn btn-success'
          }
        });
        setTimeout(function() { $('#myForm')[0].submit() },2000);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.15.5/dist/sweetalert2.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.2/dist/sweetalert2.min.css" rel="stylesheet" />
<form id="myForm">
  <button class="confirm-delete btn btn-danger">User Delete</button>
</form>

Answer 2

如果我能看到错误之一，我看的是按钮而不是表格？

如何使用 SweetAlert2 捕获表单提交方法

How to catch form submit method With SweetAlert2

javascript

forms

try-catch

laravel-blade

sweetalert2