如何在SweetAlert中实现表单确认提交？

问题描述 #

点击删除按钮触发SweetAlert确认弹窗，确认后表单未正常提交，控制台报错：Uncaught TypeError: form.submit is not a function

现有代码 #

JS弹窗代码

<script src="{{ asset('themes/js/sweetalert.min.js') }}"></script>
<script>
    $('.btn-danger').click(function(event) {
        event.preventDefault();
        var form = $(this).parents('#form-delete');
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false
        }, function(isConfirm){
            if (isConfirm) form.submit();
        });
    });
</script>

表单代码

<form action="{{ route('admin.blogs.destroy', $blog->id) }}" method="post" id="form-delete">
    @csrf
    @method('DELETE')
    <div class="btn-group btn-group-sm">
        <a href="{{ route('admin.blogs.edit', $blog->id) }}" class="btn btn-primary">edit</a>
        <button type="submit" class="btn btn-danger">delete</button>
    </div>
</form>

问题原因 #

$(this).parents('#form-delete')获取的是jQuery包装后的表单对象，直接调用.submit()会触发表单的提交事件，但之前我们已经用event.preventDefault()阻止了按钮的默认提交行为，二者机制冲突导致报错。

修复方案 #

将确认回调里的form.submit()改为调用原生DOM元素的submit()方法，绕过jQuery事件绑定直接提交表单：

<script src="{{ asset('themes/js/sweetalert.min.js') }}"></script>
<script>
    $('.btn-danger').click(function(event) {
        event.preventDefault();
        var form = $(this).parents('#form-delete');
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false
        }, function(isConfirm){
            if (isConfirm) form[0].submit(); // 改用原生DOM提交
        });
    });
</script>

也可以使用jQuery的trigger('submit')方法实现同样效果：

if (isConfirm) form.trigger('submit');

两种方式都能解决报错问题，推荐原生DOM提交的方式，逻辑更直接。

内容的提问来源于stack exchange，提问作者Asharf Khosravi