Handling Forms, Events and More with the Prototype JavaScript Library - Using periodic and event-based form observers
(Page 4 of 5 )
If you found the previous "Form" and "Field" objects useful, I have more good news for you. Prototype comes packaged with a neat set of methods for observing online forms very easily.
These form observers can be categorized in the following way. The first ones, called "periodic observers," can be used for determining that the data entered on a web form has changed during a specified period of time, while the second ones, dubbed "event-based observers," come in handy for verifying whether user-supplied input has varied after submitting the form.
In both cases, observers can be attached to a complete form or a particular field, in this way implementing a robust mechanism for processing input data.
Please study the following examples, which show how to use each one of the form observers that I explained previously. Here they are:
(example using periodic form observer)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example using periodic Form Observer</title>
</head>
<body>
<form id="myform">
First Name <input type="text" id="fname" /><br />
Last Name <input type="text" id="lname" /><br />
Email <input type="text" id="email" /><br />
<input type="submit" name="send" value="Send Form" />
</form>
<script language="javascript" src="prototype-
1.4.0.js"></script>
<script language="javascript">
// Example using periodic Form Observer
var obs=new Form.Observer($("myform"),1,displayAlert);
function displayAlert(){
alert('Data has changed!');
}
</script>
</body>
</html>
(example using event-based form observer)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example using event-based Form Observer</title>
</head>
<body>
<form id="myform">
First Name <input type="text" id="fname" /><br />
Last Name <input type="text" id="lname" /><br />
Email <input type="text" id="email" /><br />
<input type="submit" name="send" value="Send Form" />
</form>
<script language="javascript" src="prototype-
1.4.0.js"></script>
<script language="javascript">
// Example using event-based Form Observer
new Form.EventObserver($("myform"),displayAlert);
function displayAlert(){
alert('Data has changed!');
}
</script>
</body>
</html>
(example using periodic field observer)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example using periodic field observer</title>
</head>
<body>
<form id="myform">
First Name <input type="text" id="fname" /><br />
Last Name <input type="text" id="lname" /><br />
Email <input type="text" id="email" /><br />
<input type="submit" name="send" value="Send Form" />
</form>
<script language="javascript" src="prototype-
1.4.0.js"></script>
<script language="javascript">
// Example using periodic field observer
new Form.Element.Observer($('fname'),1,displayAlert);
function displayAlert(){
alert('Data has changed!');
}
</script>
</body>
</html>
(example using event-based field observer)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example using event-based field observer</title>
</head>
<body>
<form id="myform">
First Name <input type="text" id="fname" /><br />
Last Name <input type="text" id="lname" /><br />
Email <input type="text" id="email" /><br />
<input type="submit" name="send" value="Send Form" />
</form>
<script language="javascript" src="prototype-
1.4.0.js"></script>
<script language="javascript">
// Example using periodic event-based field observer
new Form.Element.EventObserver($('lname'),displayAlert);
function displayAlert(){
alert('Data has changed!');
}
</script>
</body>
</html>
As shown above, periodic form and field observers are implemented via the "Form.Observer()" and "Form.Element.Observer()" methods respectively. These can be pretty useful in those cases where you wish to determine if user input has varied during a particular period of time.
On the other hand, event-based form and field observers, like "Form.Element.Observer" and "Form.Element.EventObserver," can be very convenient for checking if input data has varied after a specific form has been submitted. Of course, it's probable that an adequate combination of the two types of observers can fit your particular needs, so keep this concept in mind when you're using Prototype for validating your own online forms.
Okay, I believe that all the previous examples should give you a better idea of how to observe forms and fields with Prototype. So let's move on to the final section of this tutorial and learn how to use some additional objects included with this library and aimed at manipulating elements of a web page.
Next: Using the Element and Insertion objects >>
More JavaScript Articles
More By Alejandro Gervasio
