How to continue to submit a form after preventing it with jQuery?

Question

For Example：
There is a deleting input element:

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

I want to give users a sweetalert2 alert before submitting the form.

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>

The sweetalert2 alert box could be shown correctly.

Question：
How to continue to submit the form after clicking sweetalert2 alert box's confirm button?

After clicking alert box confirm button, fire $("#form").submit(); — Akshay Chawla, May 14 '17 at 18:04

Mike Bovenlander · Answer 1 · 2017-05-15T07:37:26.317

You can do this with 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>

It is even better to handle the submit event rather than the click on the delete button. If a user navigates to the button with his keyboard the confirm won't show. You can fix this by doing:

$(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>

I try it but it doesn't work.It looks like the code in callback function doesn't run. — zwl1619, May 15 '17 at 07:01
@zwl1619 I changed the code and added a snippet. This works. But I don't know for sure if this is the best solution. (I commented the "csrf" field to make the snippet work.) — Mike Bovenlander, May 15 '17 at 07:38

How to continue to submit a form after preventing it with jQuery?

1 Answers1