JavaScript Bible, Gold Edition part 77 ppt

608 Part III ✦ Document Objects Reference About this object OPTION elements are nested inside SELECT elements. Each option represents an item in the list of choices presented by the SELECT element. Properties of the OPTION element object let scripts inspect whether a particular option is currently selected or is the default selection. Other properties enable you to get or set the hidden value associated with the option as well as the visible text. For more details about the interaction between the SELECT and OPTION element objects, see the discussion about the SELECT object earlier in this chapter as well as the discussion of the properties and methods associated with the options array returned by the SELECT object’s options property. I discuss all backward-compatible OPTION object properties ( defaultSelected, selected, text, and value) among the options property descriptions in the SELECT object section. The only items listed in this section are those that are unique to the OPTION element object defined in newer browsers. In NN3+ and IE4+, there is a provision for creating a new option object via an Option object constructor function. The syntax is as follows: var newOption = new Option(“text”,”value”) Here, text is the string that is displayed for the item in the list, and value is the string assigned to the value property of the new option. This new option object is not added to a SELECT object until you assign it to a slot in the options array of the SELECT object. You can see an example of this approach to modifying options in Listing 26-1. Properties label Value: String Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ The label property corresponds to the HTML 4.0 LABEL attribute of an OPTION element. This attribute (and property) enables you to assign alternate text for an option. The property is implemented in IE5/Mac and NN6. In IE5/Mac, any string assigned to the LABEL attribute or corresponding property overrides the display of text found between the start and end tags of the OPTION element. Therefore, you can assign content to both the attribute and tag, but only browsers adhering to the HTML 4.0 standard for this element display the value assigned to the label. While the label property is implemented in NN6, the browser does not modify the option item’s text to reflect the property’s setting. Example on the CD-ROM On the CD-ROM OPTION.label 609 Chapter 26 ✦ Select, Option, and FileUpload Objects Related Item: text property. OPTGROUP Element Object For HTML element properties, methods, and event handlers, see Chapter 15. Properties Methods Event Handlers form† label †See text input object (Chapter 25). Syntax Accessing OPTGROUP object properties: (IE5/Mac) [window.]document.all.elemID”.property | method([parameters]) (NN6) [window.]document.getElementById(“elemID”).property | method([parameters]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility (✓)(✓) About this object An OPTGROUP element in the HTML 4.0 specification enables authors to group options into subgroups within a SELECT list. The label assigned to the OPTGROUP element is rendered in the list as a non-selectable item, usually differentiated from the selectable items by some alternate display. In NN6, OPTGROUP items by default are shown in bold italic, while all OPTION elements nested within an OPTGROUP are indented but with normal font characteristics. The OPTGROUP element object has fewer properties, methods, and event handlers than most elements because (as of this writing) it is not part of the IE DOM in Windows versions — although it is implemented in IE5/Mac to provide nicely formatted hierarchical menus. Browsers not recognizing this element ignore it. All options are presented as if the OPTGROUP elements are not there. Properties label Value: String Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility (✓)(✓) OPTGROUP.label 610 Part III ✦ Document Objects Reference The label property corresponds to the HTML 4.0 LABEL attribute of an OPT- GROUP element. This attribute (and property) enables you to assign text to the label that encompasses a group of nested OPTION elements in the pop-up list display. IE5/Mac exhibits a bug that prevents scripts from assigning values to the last OPT- GROUP element inside a SELECT element. Example (with Listing 26-9) on the CD-ROM Related Item: OPTION.label property. File Input Element Object For HTML element properties, methods, and event handlers, see Chapter 15. Properties Methods Event Handlers defaultValue† select()† onchange† form† name† readOnly† size† type† value† †See text input object (Chapter 25). Syntax Accessing file INPUT element object properties: (NN3+/IE4+) [window.]document.formName.inputName.property | method([parameters]) (NN3+/IE4+) [window.]document.formName.elements[index].property | method([parameters]) (NN3+/IE4+) [window.]document.forms[index].inputName.property | method([parameters]) (NN3+/IE4+) [window.]document.forms[“formName”].inputName.property | method([parameters]) (NN3+/IE4+) [window.]document.forms[“formName”].elements[index].property | method([parameters]) (IE4+) [window.]document.all.elemID.property | method([parameters]) (IE5+/NN6) [window.]document.getElementById(“elemID”).property | method([parameters]) On the CD-ROM Note document.formObject.fileInputObject 611 Chapter 26 ✦ Select, Option, and FileUpload Objects About this object Some Web sites enable you to upload files from the client to the server, typically by using a form-style submission to a CGI program on the server. The INPUT ele- ment whose type is set to “file” (also known as a fileUpload object) is merely a user interface that enables users to specify which file on their PC they want to upload. Without a server process capable of receiving the file, the file input element does nothing. Moreover, you must also set two FORM element attributes as follows: METHOD=”POST” ENCTYPE=”multipart/form-data” This element displays a field and a Browse button. The Browse button leads to an Open file dialog box (in the local operating system’s interface vernacular) where a user can select a file. After you make a selection, the filename (or pathname, depending on the operating system) appears in the file input element’s field. The value property of the object returns the filename. You do not have to script much for this object on the client side. The value property, for example, is read-only in earlier browsers; in addition, a form cannot surreptitiously upload a file to the server without the user’s knowledge or consent. Listing 26-10 helps you see what the element looks like. The syntax is compatible in NN3+ and IE4+. Listing 26-10: File Input Element <HTML> <HEAD> <TITLE>FileUpload Object</TITLE> </HEAD> <BODY> <FORM METHOD=”POST” ACTION=”yourCGIURL” ENCTYPE=”multipart/form-data”> File to be uploaded: <INPUT TYPE=”file” SIZE=40 NAME=”fileToGo”><P> <INPUT TYPE=”button” VALUE=”View Value” onClick=”alert(this.form.fileToGo.value)”> </FORM> </BODY> </HTML> In a true production environment, a Submit button and a URL to your CGI pro- cess are specified for the ACTION attribute of the <FORM> tag. ✦✦✦ document.formObject.fileInputObject . client-side-oriented approach is to let JavaScript apply the document.write() method to compose the table’s tags as the page loads. Data for the cells can come from JavaScript arrays defined at the. presented by the SELECT element. Properties of the OPTION element object let scripts inspect whether a particular option is currently selected or is the default selection. Other properties enable you. properties, methods, and event handlers than most elements because (as of this writing) it is not part of the IE DOM in Windows versions — although it is implemented in IE5/Mac to provide nicely