使用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>