Reminding Users to Submit Forms
This article discusses a simple technique to remind users to submit a form on your web site before navigating to another page. This is especially useful for long forms where the submit button may be hidden at the bottom of the page, or when editing content in a content management system.
What We Are Trying to Achieve
The goal of this article is to implement code that notifies users before they browse away from a form they have filled-out but not yet submitted. There are several ways they can move away from a form without saving it:
- Closing their browser (or the browser tab)
- Refreshing the page
- Clicking on a link on the page
- Submitting a different form on the page
If the user does any of these we want to notify them that they will lose their changes. We then want to give them the option to proceed or to cancel moving away so they can then submit the form.
The only case where we don't want to notify them if they move away from the form is if they submit the form in question.
By default our solution will not alert the user if they simply load the page and then navigate away straight away. Rather, we will ensure the user interacts with the form before we bother notifying them. To do this, we will monitor the
onfocus event on all form elements in the given form. You may wish to implement a more advanced solution, such as comparing form values with their original values to see if anything has changed.