Section 2.3. Accessing Page Elements

2.3. Accessing Page Elements

Although recent browsers support the W3C DOM as a means of accessing elements within the current HTML page (see the section "DOM Methods" later in this chapter for more information), there are easier ways to work with data on a page. Two of them are covered in this section.

2.3.1. Accessing Form Elements

JavaScript's document object grants access to all elements on the current page. document is a representation of the DOM that is accessible to JavaScript. To make the access as convenient as possible, there are several subproperties that allow direct access to special page elements. Here are some examples, listed alphabetically:

document.embeds: An array containing all embedded media (via <embed>) on the current page
document.forms: An array containing all <form> elements on the page
document.frames: An array containing all frames on the current page
document.images: An array containing all images on the current page
document.links: An array containing all hyperlinks on the current page

The most commonly used property is document.forms, which lets you access all <form> elements on the current page, such as text boxes and buttons. Admittedly, there is usually only a single form on a page. However, the document.forms[0] property (the forms property is actually an array) grants access to all elements within the first (and usually only) form. For example, imagine the following form:

 <form>   <input type="text" name="TextBox1" /> </form>

The expression document.forms[0].elements["TextBox1"] accesses the text field on the page. (A shortcut for this is document.forms[0].TextBox1; however, this does not work if special characterssuch as space characters or hyphensare used in the form element's name attribute.) Depending on the type of the form element (e.g., text fields, radio buttons, checkboxes), accessing its value (e.g., the text in the text field, or whether a radio button is selected) is a bit different, but usually the value attribute will contain this information, just as the value HTML attribute does for most form fields.

Example 2-11 outputs the data entered into a text field after the user clicks on a button. The markup for the button looks like this:

 <input type="button" onclick="ShowText(this.form);" />

When you click the button, the ShowText() function is called. The parameter is this.form, which is a reference to the element's parent form. This makes accessing the data a bit easier, because you can avoid using document.forms[0] in the called function. Example 2-11 shows the complete example.

Example 2-11. Accessing form elements

 JavaScript-form-textbox.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   <title>JavaScript</title>   <script language="JavaScript" type="text/javascript">   function ShowText(f) {     alert("Entered text: " + f.elements["TextBox1"].value);   }   </script> </head> <body>   <form action="">     <input type="text" name="TextBox1" />     <input type="button" value="Show text" onclick="ShowText(this.form);" />   </form> </body> </html>

Figure 2-6 shows the result displayed when the script runs.

Figure 2-6. The form data is shown in the modal window

Table 2-1 shows the properties used to access the most commonly used values within the most common form field types. For instance, the value of a text box defined with the markup <input type="text" name="Name" /> can be accessed using the expression document.forms[0].elements["Name"].value (assuming that there is only one form in the document).

Table 2-1. HTML form fields and associated properties
Form field	HTML markup	Property
Text fields and password fields	<input type="text"> <input typ="password"> <textarea>	`value`: gets and sets the data in the field
Radio buttons	<input type="radio">	`checked`: whether the radio button is checked or not
Checkboxes	<input type="checkbox">	`checked`: whether the checkbox is checked or not
Selection lists	<select>	`selectedIndex`: index of first selected element (or `-1` if nothing is selected) `options`: array containing all list options
Selection list options	<option>	`selected`: whether an option is selected or not `value`: value of an option

By accessing form elements, it's possible to add special features to a web page, such as a script to perform client-side form data validation.

2.3.2. Accessing Generic Elements

For reading form data, document.forms is very convenient. One of the main scenarios for JavaScriptespecially when used as part of an Ajax implementationis to display data, for instance in a paragraph (<p>) or text span (<span> or <label>) element. You can do this in three steps:

Using the name attribute, provide a unique identifier for the paragraph or span elementthis is not required or used for the HTTP request when the form is submitted, but necessary for accessing element values in JavaScript.
In JavaScript, get a reference to the element using the expression document.getElementById().
Set the element's innerHTML property to display data within the element.

Example 2-12 once again takes data from a text field, but this time writes it into a <span> element.

Example 2-12. Putting HTML and text into an element

 JavaScript-form-label.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   <title>JavaScript</title>   <script language="JavaScript" type="text/javascript">   function HtmlEscape(s) {     var result = s.replace(/&/g, "&amp;")                   .replace(/</g, "&lt;")                   .replace(/>/g, "&gt;")                   .replace(/"/g, "&quot;")                   .replace(/'/g, "&apos;");     return result;   }   function ShowText(f) {     var label = document.getElementById("Label1");     label.innerHTML = HtmlEscape(f.elements["TextBox1"].value);   }   </script> </head> <body>   <form action="">     <input type="text" name="TextBox1" />     <input type="button" value="Show text" onclick="ShowText(this.form);" />     <p>Entered text: <span >---</span></p>   </form> </body> </html>

By default, the <span> element just contains three hyphens (-). When the user clicks on the button, the dashes are replaced with the HTML-encoded data from the text field. Figure 2-7 shows the result.

Figure 2-7. The text is HTML-encoded and put into the span element