WarningBeforeUnload

Alerts the user when leaving a page without saving the changes.

Installation

Insert the JS file:

<script src="WarningBeforeUnload.js"></script>

And create a new instance of WarningBeforeUnload after the form and it’s contents are loaded:

<script>
  new WarningBeforeUnload();
</script>

Per default WarningBeforeUnload will apply to the first form tag in the document. You can customize this with configuration options.

Configuration

Initialize the class with configuration options:

<script>
  const unloadMessage = new WarningBeforeUnload({
    selector: 'form#myForm',
  });
</script>

|Option|Type|Default|Description| |------|----|-------|-----------| |selector|String|form|Set the HTML selector of your form.| |form|HTMLobject|false|Instead of using a selector you can set the HTML form object on your own.| |onInput|Boolean|false|Set to true if your want to apply warnings only when the user changed something on it’s own and to disable auto-detection for dynamic changes. This can be helpful if your form has changed dynamically after WarningBeforeUnload is loaded.| |onSubmit|Function|EventListener|Setup a callback function if you want to handle form submits on your own. To supress the warning on page leave set unloadMessage.preventUnload = false. For example: unloadMessage.onSubmit = unloadMessage.form.addEventListener('submit', () => unloadMessage.preventUnload = false)|

Troubleshooting

Warning appears without changing anything in the form.

In most cases this is caused by dynamically changed values in the form. Try initializing WarningBeforeUnload after the page is fully loaded and/or set option onInput to true:

window.addEventListener('load', () => {
    new WarningBeforeUnload({
        onInput: true,
    });
});

No warning appears.

If the content of the form is changed programmatically don’t use option onInput or set it to false. Also be sure to initialize WarningBeforeUnload after the page is fully loaded as described above.

Warnings are working only for the first form, but I have multiple.

Every form element needs it’s own instance of WarningBeforeUnload:

new WarningBeforeUnload({
    selector: 'form#myForm_1',
});

new WarningBeforeUnload({
    selector: 'form#myForm_2',
});

How can I customize the warning message?

This is not possible because of security reasons. WarningBeforeUnload relies on beforeunload and therefore it’s limited to the support of the browsers which don’t support a custom message anymore to prevent misusing it.