Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

sunrise's avatar

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

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

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?

0 likes
7 replies
Cronix's avatar

Give your form an id and then use that to submit it

$("#your-form").submit();

1 like
pawelmysior's avatar
Level 15

I have a piece of code that looks like this:

$('.btn-delete').on('click', function (e) {
        e.preventDefault();
        let deleteUrl = $(this).attr('href');
        swal({
            title: 'Are you sure?',
            text: 'This operation cannot be undone!',
            type: 'warning',
            showCancelButton: true,
            cancelButtonText: 'Cancel',
            confirmButtonText: 'Delete',
            closeOnConfirm: false,
        }, function () {
            let form = document.createElement('form');
            form.setAttribute('method', 'post');
            form.setAttribute('action', deleteUrl);

            let csrfField = document.createElement('input');
            csrfField.setAttribute('type', 'hidden');
            csrfField.setAttribute('name', '_token');
            csrfField.setAttribute('value', $('meta[name="csrf-token"]').attr('content'));
            form.appendChild(csrfField);

            let methodField = document.createElement('input');
            methodField.setAttribute('type', 'hidden');
            methodField.setAttribute('name', '_method');
            methodField.setAttribute('value', 'DELETE');
            form.appendChild(methodField);

            document.body.appendChild(form);
            form.submit();
        });
    });

It's not pretty, but it gets the job done. The cool thing is that you don't need to create the form yourself, you just use it like that:

<a class="btn-delete" href="/post/1">Delete the post</a>
1 like
sunrise's avatar

@PawelMysior

I try it but it doesn't work.

It looks like the code in callback function doesn't run.

sunrise's avatar

@Cronix

I put the code in callback function ,but it doesn't work.

    <form class="need-alert" 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 () {
                
                $(".need-alert").submit();
    
            }).catch(swal.noop);
        })
    </script>
shakti's avatar

in the end

 <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 () {
                
                 //...


         $('.need-alert').submit();
    
            }).catch(swal.noop);
        })
    </script>
MaverickChan's avatar

you cannot continue submitting the form .

all you have to do is add some ajax code in the swal callback function to do your delete job.

and btw , i think you form looks little strange.

normally , you don't need to put csrf_field in the form , all the work could be done in ajax.

Please or to participate in this conversation.