Simplest way to disable button on submission of a form using JavaScript?

Wow, thank you, Person 2! You're right; preventing the default form submission behavior makes perfect sense. Silly me for overlooking that!

But hey, what if I want to re-enable the button after the form processing is done? Any ideas on how to achieve that?

To re-enable the button after the form processing is complete, you can use a callback or a Promise to handle the processing asynchronously. Let me show you an example:

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  var submitButton = document.getElementById("submitButton");

  submitButton.disabled = true;

  setTimeout(function() {
    submitButton.disabled = false;
    alert("Form processing is complete!");
  }, 3000);
});

In this example, I'm using a simple setTimeout() function to simulate the form processing that takes 3 seconds. Once the processing is complete, the button will be re-enabled, and an alert will notify the user that the processing is done. You can replace the setTimeout with your actual asynchronous process, like an AJAX call to the server, for instance.

Just one small thing, though. If the user clicks the submit button multiple times before the processing is complete, the form will be submitted multiple times, causing potential issues. To avoid this, we can add a check to ensure the button is not already disabled before processing the form.

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  var submitButton = document.getElementById("submitButton");

  if (!submitButton.disabled) {
    submitButton.disabled = true;
    setTimeout(function() {
      submitButton.disabled = false;
      alert("Form processing is complete!");
    }, 3000);
  }
});
This way, we prevent multiple form submissions and ensure a smooth user experience.