Confirm before form submit


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>

Demo

Replit:



Please support this site and join our Discord!