Alert user if name input is empty before unload.

by Michael Prosser

HTML

<form>
  <input type="text" name="name" id="name" />
</form>

JavaScript

const beforeUnloadHandler = (event) => {
  // Recommended
  event.preventDefault();

  // Included for legacy support, e.g. Chrome/Edge < 119
  event.returnValue = true;
};

const nameInput = document.querySelector("#name");
const body = document.querySelector("body");

nameInput.addEventListener("input", (event) => {
  if (this.value == "") {
    body.addEventListener("beforeunload", beforeUnloadHandler);
  } else {
    body.removeEventListener("beforeunload", beforeUnloadHandler);
  }
});