This post goes over how to confirm before form submit:
Single Form
Given an HTML form with a submit button:
<!-- form.html -->
<form action="#">
<button type="submit">Submit</button>
</form>
You can confirm before submitting the form using JavaScript:
<script>
const form = document.querySelector('form');
const button = form.querySelector('button[type="submit"]');
button.addEventListener('click', (event) => {
event.preventDefault();
if (confirm('Are you sure you want to submit?')) {
form.submit();
}
});
</script>
Multiple Forms
For multiple forms, use document.querySelectorAll
:
<script>
const forms = document.querySelectorAll('form');
forms.forEach((form) => {
const button = form.querySelector('button[type="submit"]');
button.addEventListener('click', (event) => {
event.preventDefault();
if (confirm('Are you sure you want to submit?')) {
form.submit();
}
});
});
</script>