Reminding Users to Submit Forms
Using the FormProtector Class
The final step is to modify your HTML code to actually make use of this class. The constructor of the class accepts the form as its only argument. Therefore you can use code similar to the following to make use of the FormProtector JavaScript class.
Listing 7 Using the FormProtector class (form.html)
<html> <head> <title>Using the FormProtector Class</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="FormProtector.js"></script> </head> <body> <form method="post" action="target" id="myForm"> <div> <input type="text" name="foo" /> <input type="submit" value="Submit" /> </div> </form> <script type="text/javascript"> var fp = new FormProtector('myForm'); fp.setMessage('Remember to submit the form!'); </script> </body> </html>
Note: Since a default message is included in the class, the call to
setMessage() is optional.You can test this code by loading form.html then immediately trying to refresh. No prompt should appear. Next you should try clicking in the text input box, then clicking refresh in your browser. In this case the prompt should appear.