In the JavaScript program, the two forms are accessed by using the name and the id of the form and its elements.. We could write document.forms[0].name or document.form1.name, but by u
Trang 1How JavaScript References a Form by name or id. The <form> tag has a name
attribute that allows you to give your form a name It is somewhat easier and more
read-able to reference a form by its name than by using the array syntax, such as forms[0] and
forms[1] You will need the name attribute if you are submitting the form to a server-side
program as discussed in Section 11.4.1
Any object, including the form, can also be referenced by using its unique ID and the
getElementById() method of the document, standardized by the W3C DOM
In Example 11.6, two HTML forms are created: One contains a textbox, and the other
a button Each of the forms is given a name with the name attribute and an id In the
JavaScript program, the two forms are accessed by using the name and the id of the form
and its elements
Table 11.7 Properties of the elements Object
Property What It Describes
form The name of the form object where the element was defined
(read-only).
name The name of the input device as specified in the HTML name attribute
(read-only).
type The type of input device, such as radio, checkbox, password, and so
on (read-only).
disabled A Boolean value; if true the element is disabled so that it can’t be
modified; even if it contains a value, data from a disabled form field is not sent back to the server.
value The text that is associated with the input device, such as the text
entered into the text area or textbox, the text that appears in a button, and so on (read/write).
E X A M P L E 1 1 6
<html>
<head><title>Naming Forms object</title></head>
<body>
1 <form name="form1" id=”first_form”>
Enter your name:
2 <input type="text"
id="namefield"
name="namefield"
value="Name: " />
3 </form>
Trang 24 <form name="form2" id="second_form">
5 <input type="button" value="Press here">
6 </form>
<big>
7 <script type="text/javascript">
// DOM Level 0 How do we reference the form in JavaScript?
// Go down the document tree: window/document/form.property // The window object can be left off, because it is at the top document.write( "The first form is named: " +
8 window.document.forms["form1"].name);
document.write( ".<br />The second form is named: " +
9 document.forms["form2"].name);
document.write(".<br />Also can be referenced as: <em>" +
'document["form2"].name'+".</em><br />");
document.write("Another way to reference a form: <em>" +
'document.form2.name' +".</em><br />");
10 // DOM Level 1 The standardized W3C DOM way
document.write("<br />Using the id attribute to get the form \ name,<br />");
11 var f1 = document.getElementById("first_form");
// define variables
var f2 = document.getElementById("second_form");
12 document.write("The first form is named " + f1.name +
".<br />");
document.write("The first form is named " + f2.name +
".<br />");
</script>
</big>
</body>
</html>
E X P L A N A T I O N
1 The name of the first HTML form in the document is form1 The id attribute is
as-signed first_form.
2 The input type for this form is a text field with a default value “Name: ”.
3 This tag ends the first form
4 The name of the second form is form2 Its id is second_form.
5 The input type for this form is a button with the value “Press here”, which will
ap-pear as text in the button
6 This tag ends the second form
7 The JavaScript program starts here
Continues
E X A M P L E 1 1 6 (C O N T I N U E D)
Trang 38 To display the name of the first form, descend the JavaScript tree, starting at the
window, to the document, to the first form object named form1, to its name property
We could write document.forms[0].name or document.form1.name, but by using the
form object as a property of the document and the associative array notation with
its name in square brackets, it is easier to identify the object as a form object by
name if there are a number of forms on the page
9 To display the name of the second form, descend the JavaScript tree as in line 8
This time we left out the window object, which is fine because JavaScript knows
that the window is always at the top of the tree See Figure 11.13.
10 Although this chapter focuses on the JavaScript legacy DOM 0 when working
with forms, all HTML elements are accessible via the DOM Level 1, the
standard-ized DOM, which all modern browsers should support Navigating forms, images,
and links with JavaScript has always been supported by DOM 0 and is still widely
used
11 The getElementById() method returns a reference to the HTML element by the id
that was assigned to it on line 1 In most of the examples, the name and id are the
same, but in this example, they are different to make it clear that the id, not the
name, is used to get a reference to the element The variable, f1, is a reference to
the first form
12 Now that we have a reference to the form, we can use it and the dot notation to
get its name
Figure 11.13 Name those forms!
E X P L A N A T I O N
Trang 4The elements and properties of the HTML <form> tag are shown in Table 11.8.
How JavaScript References the Form Elements by Name. Each form object
is an element of the forms[] array and each form contains input types such as buttons,
textboxes, checkboxes, and so on Each of the input types is also stored in an array called
elements[] in the order in which the input device is found in the document In the
fol-lowing example, there is one form, called myform It contains two elements, button
input types, named button1 and button2, respectively The JavaScript program gets access
to the form and button properties by using names to reference them An object can be
referenced by using the numeric array notation, or referenced by its name with the dot
notation; that is, object first, then dot and name, or by putting the name as a string in
square brackets (associative array) If there are a number of forms and buttons, using the
associative array notation, rather than the numerically indexed array notation, might
make it easier to locate the object For instance, if one of the forms or input devices has
been moved or deleted, the numeric index values for all of the objects on the page would
Table 11.8 <form> Tag Elements and Properties
button name, type, value A general-purpose GUI button.
checkbox checked, defaultChecked, name,
type, value
A set of (or one) clickable boxes allowing multiple selections.
FileUpLoad name, type, value A field allowing a file to be submitted as part of a
form.
hidden name, type, value A field where the content is not shown in the
form.
password defaultValue, name, value A field for entering a password, masking the real
characters typed.
radio checked, defaultChecked, name,
type, value
A set of (or one) clickable boxes allowing only one selection.
reset name, type, value A button that clears and resets the form fields.
select length, name, options,
selectedIndex, type, value
A popup or scrolling list of items from which to choose.
submit name, type, value, A button used for submitting form data.
text defaultValue, name, type, value A rectangular field allowing one line of input.
textarea defaultValue, name, type, value A rectangular box allowing multiple lines of input
value.
Trang 5need to be changed Writing document[“form3”][“button2”] in place of
docu-ment.forms[2].elements[1] would make the change easier.
If the first form on the page is named “myForm”, there are several ways to reference it:
document.forms[0]
document.forms.myForm document.forms["myForm"]
And to name a form’s input element:
document.forms[0].elements[0]
document.myform.button1 document["myForm"]["button1"]
E X A M P L E 1 1 7
</html>
<head><title>Naming Buttons</title></head>
<body bgcolor="cyan"><font face="arial">
<strong>Naming Forms and Buttons<br />
<big>
1 <form name="myform">
2 <input type="button" name="button1" id="button1"
value="red" />
3 <input type="button" name="button2" id="button2"
value="blue" />
4 </form>
<script type="text/javascript">
document.write("<b><br />Form name is: </b><em>" +
5 document.myform.name + "</em>");
document.write("<b><br />Form name is: </b><em>" +
6 document["myform"].name +"</em>");
document.write("<b><br />Name of first button is:</b><em> " +
7 document["myform"]["button1"].name
+ "</em>and its type is<em>"
+ document.myform.button1.type);
document.write("</em><b><br />Value of button1 field:</b><em> " +
8 document["myform"]["button1"].value);
document.write("</em><b><br />Name of second button is:</b><em> "
+ document.myform.button2.name);
document.write("</em><b><br />Value of button2 field:</b><em> "
+ document.myform.button2.value);
</script>
</big>
</strong>
</body>
</html>
Trang 6E X P L A N A T I O N
1 The HTML form starts here It is named myform JavaScript can now reference the
form by its name
2 The input type is a button named button1 and assigned a value of red JavaScript
can now reference the button by its name The id attribute will not be used in this
example It is here because it is common to use both a name and id for the form
and its elements The id gives JavaScript another way to get access to the object,
which will be covered in detail in later chapters
3 The input type is a button named button2 and assigned a value of blue.
4 The form ends here
5 Within the JavaScript program the form is referenced by its name It is a property
of the document object Without naming the form, it would be referenced as
doc-ument.forms[0].name.
6 The name assigned to the first button is displayed Putting the name as a string in
square brackets (associative array) is a common approach to naming forms and
their elements Without naming the form or the button, it would be referenced as
document.forms[0].elements[0].value It is easy to make typos here Spelling
my-form.name as myform1.name causes the output to be myform1 is undefined See
Fig-ures 11.14 and 11.15
7 Using the associative array notation, the name for the form is a string inserted in
the first set of brackets, and the second element, a string name for button1 is
in-serted in the second set of square brackets We use the dot notation to retrieve the
value of the type property for the form’s button.
8 Using the two-dimensional associative array notation, we retrieve the value that
was assigned to button1, which is red.
Figure 11.14 Name that button!
Trang 7Submitting an HTML Form Without JavaScript. When the user clicks a submit
button, the form is normally sent to the server for further processing by another
appli-cation such as a PHP, ASP.NET, or CGI script Before the server gets the form, its content
is gathered by the browser, URL encoded, and then sent to the address supplied in the
action attribute of the form (In the previous examples, the action attribute was not used
because there was no reason to process the user input in the sample forms.) The
appli-cation on the server side decodes and processes the form information From there, an
acknowledgment can be sent back to the user, an e-mail delivered, the processed
infor-mation sent to a database, or whatever else we define Now let’s look at an example of
an HTML form and how it is submitted to a server application After the user fills out
the form, he or she will click the Submit button The form data will be collected by the
browser as name/value pairs and sent to the server The method attribute determines how
the data is sent (as a query string or message body) and the action attribute determines
where it will be sent (the URL of a server)
Figure 11.15 What went wrong? Watch your spelling! We tried to reference a form
by the wrong name!
E X A M P L E 1 1 8
<html>
<head><title>An HTML Form</title></head>
<body><big><strong>
1 <form action="/cgi-bin/bookstuff/form1.cgi" method="post"><p>
<fieldset><legend>All About You</legend>
<p>
Type your name here:
2 <input type="text" name="namestring" size="50" />
</p>
<b>Choose a work place:</b><br />
3 <input type="checkbox" name="place"
value="LA">Los Angeles<br />
<input type="checkbox" name="place" value="SJ">San Jose<br />
<input type="checkbox" name="place"
value="SF" checked>San Francisco <br />