Give your form an id and then use that to submit it
$("#your-form").submit();
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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?
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>
Please or to participate in this conversation.