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

The FormProtector JavaScript Class

The class we are going to implement is called FormProtector. You may prefer a different name but hopefully this name describes what we're trying to achieve.

We begin the class by defining the class using Prototype's Class.create() function. The class properties we use are form (to hold the HTML form we're protecting), alert (a variable to indicate whether or not the confirm box should be shown), and message (the string that is shown in the confirm box).

Listing 2 Setting up the FormProtector class (listing-2.js)
var FormProtector = Class.create({
    form    : null,     // the form being protected
    alert   : false,    // whether or not to show the confirm box
    // the message to display in confirm box
    message : 'Please remember to submit your form',

Next we implement the class constructor (which we must name initialize() when using Prototype). In this method we want to firstly setup the form. We need to monitor the onsubmit event so we can ensure that the confirm box isn't shown when the form is submitted normally.

After observing that event we retrieve all of the form elements so we can observe the onfocus event on each element. Prototype makes retrieving the form elements simple by using the getElements() method on the form object. We can then loop over each element (using Prototype's each()) and observe the event accordingly.

Essentially what this code is doing is when a user interacts with a form element we need to remember to display the confirm box if they try to navigate away. We do this by setting the alert property to true (we will check this value later).

Note: For more information about how binding of functions works in Prototype refer to

The final step in this method is to observe the onbeforeunload event on the DOM element window. When the user tries to navigate away from the current page, the _onBeforeUnload() method will be called.

Listing 3 The FormProtector constructor (listing-3.js)
    initialize : function(form)
        this.form = $(form);
        this.form.observe('submit', this._onFormSubmit.bindAsEventListener(this));
        this.form.getElements().each(function(elt) {
            elt.observe('focus', function() {
                this.alert = true;
        Event.observe(window, 'beforeunload', this._onBeforeUnload.bindAsEventListener(this));

The next step is to write a simple function to customize the message that is shown in the confirm box. While we don't really need it for this example you may find it useful (especially if you want to reuse this class and have a different message for each form on which you use it).

Listing 4 Customizing the confirmation message with setMessage() (listing-4.js)
    setMessage : function(str)
        this.message = str;
Note: My own personal preference is to use Camel Case (beginning with a lower-case letter) for public functions (such as setMessage()), while using Camel Case beginning with an underscore for private/protected methods (such as the event handlers).

Next we must write the event handler for when the form is submitted. In initialize() we defined this function as _onFormSubmit(). Since submitting the form in question is a method of navigating away (although one we don't want to prompt the user for), we need to update the alert property to be set to false.

Listing 5 Handling the form submission event (listing-5.js)
    _onFormSubmit : function(e)
        this.alert = false;

Finally we must implement the _onBeforeUnload() method, which is called when the user tries to navigate away from the current page. If the alert class property is set to true then we want to display the confirm box, whereas if alert is false then we don't want to display the confirm box.

The DOM doesn't give us the same control over the browser with this event as it does with others. Basically if we set the event's return value (using the returnValue property), then the confirmation message is shown, otherwise it is not.

The following code shows how to handle this event and also how to close off the class.

Listing 6 Handling the onbeforeunload event (listing-6.js)
    _onBeforeUnload : function(e)
        if (this.alert)
            e.returnValue = this.message;

The full code for this class (FormProtector.js) is available from the article file listing.

In This Article

Additional Files