Try It Out: The Forms Array - Page 3
September 21, 2001
Let's have a look at an example that uses the forms array. Here
we have a page with three forms on it. Using the forms[] array we
access each Form object in turn and show the value of its name
property in a message box.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
function window_onload()
{
var numberForms = document.forms.length;
var formIndex;
for (formIndex = 0; formIndex < numberForms; formIndex++)
{
alert(document.forms[formIndex].name);
}
}
</SCRIPT>
</HEAD>
<BODY LANGUAGE=JavaScript onload="window_onload()">
<FORM NAME="form1">
<P>This is inside form1</P>
</FORM>
<FORM NAME="form2">
<P>This is inside form2</P>
</FORM>
<FORM NAME="form3">
<P>This is inside form3</P>
</FORM>
</BODY>
</HTML>
Save this as ch6_examp1.htm. When you load it into your browser,
you should see three alert boxes, each of which shows a name of a
form.
How It Works
Within the body of the page we define three forms. Each form is
given a name, and contains a paragraph of text.
Within the definition of the <BODY> tag, the
window_onload() function is connected to the window object's
onload event handler.
<BODY LANGUAGE=JavaScript onload="return
window_onload()">
This means that when the page is loaded, our window_onload()
function will be called.
The window_onload() function is defined in a script block in the
head of the page. Within this function we loop through the
forms[] array. Just like any other JavaScript array, the forms[]
array has a length property, which we can use to determine how
many times we need to loop. Actually, as we know how many forms
there are, we could just write the number in. However, here I'm
demonstrating the length property, since it is then easier to add
to the array without having to change the function. Generalizing
your code like this is a good practice to get into.
The function starts by getting the number of Form objects within
the forms array and stores it in variable numberForms.
function window_onload()
{
var numberForms = document.forms.length;
Next we define a variable, formIndex, to be used in our for loop.
After this comes the for loop itself.
var formIndex;
for (formIndex = 0; formIndex < numberForms; formIndex++)
{
alert(document.forms[formIndex].name);
}
Remember that since the indices for arrays start at zero, our
loop needs to go from an index of 0 to an index of numberForms -
1. We do this by initializing the formIndex variable to zero, and
setting the condition of the for loop to formIndex <
numberForms.
Within the for loop's code, we pass the index of the form we want
(that is, formIndex) to document.forms[], which gives us the Form
objectat that array index in the forms array. To access the Form
object's name property, we put a dot at the end and the name of
the property, name.
HTML Forms: Interacting with the User - Page 2
Beginning JavaScript
Other Form Object Properties and Methods - Page 4
|
