How to Alert for Unsaved Changes in Form with JavaScript?

To alert for unsaved changes in form with JavaScript, we can track changes done to inputs in a form.

Then we can set the window.onbeforeunload property to a function that checks the changing state of the input and returns an alert message if there’re changes.

For instance, if we have:

<div id="app">
  <input />
</div>

Then we can write the following JavaScript to track whether the input value has changed and shows the alert when the user leaves the page when there’re changes made:

let unsaved = false;

const input = document.querySelector("input");
input.addEventListener("change", () => {
  unsaved = true;
});

const unloadPage = () => {
  if (unsaved) {
    return "You have unsaved changes on this page.";
  }
};

window.onbeforeunload = unloadPage;

We have the unsaved variable, which we set to true in the change event listener of the input that we added with input.addEventListener .

And then we have the unloadPage function that checks if unsaved is true .

If it is, then we return a string that triggers the alert when we set the function as the value of window.onbeforeunload .

The message can’t be changed, so we can return any string.

onbeforeunload runs when we leave the page.