PhpRiot
Become Zend Certified

Prepare for the ZCE exam using our quizzes (web or iPad/iPhone). More info...


When you're ready get 7.5% off your exam voucher using voucher CJQNOV23 at the Zend Store

Reminding Users to Submit Forms

Introduction

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.

The technique described in this article uses JavaScript and works in modern browsers such as Internet Explorer, Firefox and Safari.

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.

Our Solution

To implement this functionality we are going to write a short JavaScript class. Note that this class relies on the Prototype JavaScript library, which can be downloaded from http://prototypejs.org. The version of Prototype used in this article is 1.6.0.

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.

In This Article


Additional Files