Prototyype.js Libraries
Sam Stephenson’s prototype.js is a popular JavaScript library containing an array of functions useful in the development of cross-browser JavaScript applications, and including specific support for Ajax. Shortly you’ll see how your JavaScript code can be simplified by using this library’s powerful support for DOM manipulation, HTML forms, and the XMLHttpRequest object.
The latest version of the prototype.js library can be downloaded from http://prototypejs.org/.
Including the library in your web application is simple; just include in the <head> section of your HTML document the following line:
<script src="prototype.js"></script>
The prototype.js library contains a broad range of functions that can make writing JavaScript code quicker and the resulting scripts cleaner and easier to maintain.
The library includes general-purpose functions providing shortcuts to regular programming tasks, a wrapper for HTML forms, an object to encapsulate the XMLHttpRequest object, methods and objects for simplifying DOM tasks, and more. Let’s take a look at some of these tools.
The $() Function
$() is essentially a shortcut to the getElementById() DOM method. Normally, to return the value of a particular element you would use an expression such as
var mydata = document.getElementById('someElementID');
The $() function simplifies this task by returning the value of the element whose ID is passed to it as an argument:
var mydata = $('someElementID');
Furthermore, $() (unlike getElementById()) can accept multiple element IDs as an argument and return an array of the associated element values. Consider this line of code:
mydataArray = $('id1','id2','id3');
In this Example...
- mydataArray[0] contains value of element with ID id1.
- mydataArray[1] contains value of element with ID id2.
- mydataArray[2] contains value of element with ID id3.
The $F() Function
The $F() function returns the value of a form input field when the input element or its ID is passed to it as an argument. Take a look at the following HTML snippet:
<input type="text" id="input1" name="input1">
<select id="input2" name="input2">
<option value="0">Option A</option>
<option value="1">Option B</option>
<option value="2">Option C</option>
</select>
Here we could use
$F('input1')
to return the value in the text box and
$F('input2')
to return the value of the currently selected option of the select box. The $F() function works equally well on check box and text area input elements, making it easy to return the element values regardless of the input element type.
The Form Object
prototype.js defines a Form object having several useful methods for simplifying HTML form manipulation.
You can return an array of a form’s input fields by calling the getElements() method:
You can return an array of a form’s input fields by calling the getElements() method:
The serialize() method allows input names and values to be formatted into a URL-compatible list:
inputlist = Form.serialize('thisform');
Using the preceding line of code, the variable inputlist would now contain a string of serialized parameter and value pairs:
field1=value1&field2=value2&field3=value3...
Form.disable('thisform') and Form.enable('thisform') each do exactly what the name implies.
Try it Yourself: Using the getElements() Method
Let’s gather some information about an HTML form using the getElements() method. As I mentioned earlier, this method returns an array containing the elements of a particular form. Here’s the code for our simple form
<!DOCTYPE html>
<html>
<head>
<title>Prototype.js example</title>
</head>
<body>
<form id="exampleForm" action="#" onsubmit="return false">
Username: <input type="text" name="username" /><br/>
Telephone: <input type="text" name="telephone" /><br/>
Message: <input type="text" name="message" /><br/>
</form>
<input type="button" value="Result" onclick="showFormFields();"/>
</body>
</html>
For this example, we just have three text fields,
After including prototype.js in the head section of the HTML, we need to write a function to be executed when the form’s button is clicked. This function will use the getElements() method to build an array of the form’s elements. It will then read back the names and the entered values from the form via a JavaScript alert.
<!DOCTYPE html>
<html>
<head>
<title>Prototype.js example</title>
<script src="prototype.js"></script>
<script>
function showFormFields() {
var form = $('exampleForm');
var message = '';
var fields = form.getElements();
for(var x=0; x<fields.length;x++) {
message += "Field Name : " + fields[x].name + " Value : " +
fields[x].value + "\n";
}
alert(message);
}
</script>
</head>
<body>
<form id="exampleForm" action="#" onsubmit="return false">
Username: <input type="text" name="username" /><br/>
Telephone: <input type="text" name="telephone" /><br/>
Message: <input type="text" name="message" /><br/>
</form>
<input type="button" value="Result" onclick="showFormFields();"/>
</body>
</html>
