How to prevent buttons from causing a form to submit with HTML

https://gomakethings.com/how-to-prevent-buttons-from-causing-a-form-to-submit-with-html/

By default, a button has an innate type property of submit. When tapped, clicked, or activated inside a form, it will cause that form to submit (and trigger a corresponding submit event).

<form id="say-hi">
  <button>Activate Me</button>
</form>

let form = document.querySelector("#say-hi");
form.addEventListener("submit", function () {
  console.log("Someone said hi!");
});

Every now and then, you have a button inside a form that’s used for some other interaction, and should not cause the form to submit.

I often see people use JavaScript to detect those buttons, and run event.preventDefault() to stop the default form submit behavior from running. I used to be one of those people.

<form id="say-hi">
  <button>Activate Me</button>
  <button id="toggle-something">Toggle Something</button>
</form>

form.addEventListener("submit", function (event) {
  // Ignore the #toggle-something button
  if (event.submitter.matches("#toggle-something")) {
    event.preventDefault();
  }

  console.log("Someone said hi!");
});

A while back, though, my friend Eric Bailey taught me a much simpler way to handle this: add type="button" to the button.

<form id="say-hi">
  <button>Activate Me</button>
  <button id="toggle-something" type="button">Toggle Something</button>
</form>

Now, clicking, tapping, or otherwise activating the #toggle-something button will not cause a submit event to run.