Learn Advanced JavaScript Programming

Example 22-13 demonstrates the use of the Option constructor to create a nested select object structure.

<HTML>
<HEAD>
<TITLE>Nested select structure</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

var menu = new Array(3)

for (var i = 0; i < menu.length; ++i) {
  menu[i] = new Array()
}
menu[0][0] = new Option("Option 1-1", "", true, true)
menu[0][1] = new Option("Option 1-2")
menu[0][2] = new Option("Option 1-3")
menu[0][3] = new Option("Option 1-4")
menu[0][4] = new Option("Option 1-5")

menu[1][0] = new Option("Option 2-1", "", true, true)
menu[1][1] = new Option("Option 2-2")
menu[1][2] = new Option("Option 2-3")

menu[2][0] = new Option("Option 3-1", "", true, true)
menu[2][1] = new Option("Option 3-2")
menu[2][2] = new Option("Option 3-3")
menu[2][3] = new Option("Option 3-4")

function updateSub(index, subMenu) {
  // delete all options in submenu
  for (var j = 0; j < subMenu.options.length; ++j) {
 subMenu.options[j] = null
  }

  // add options to submenu
  for (var k = 0; k < menu[index].length; ++k) {
 subMenu.options[k] = menu[index][k]
  }

  history.go(0)
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="main" onChange= "updateSub(this.selectedIndex,
 this.form.sub)">
<OPTION SELECTED> Option 1
<OPTION> Option 2
<OPTION> Option 3
</SELECT>

<SELECT NAME="sub">
<SCRIPT LANGUAGE="JavaScript">
<!--

for (var ind = 0; ind < menu[0].length; ++ind) {
  document.write("<OPTION> Option 1-" + (ind + 1))
}

// -->
</SCRIPT>
</SELECT>

</FORM>
</BODY>
</HTML>

Example 22-13. “Nested” select objects connected via JavaScript.

When the page first loads, two select objects are created. The first one includes three options and is not modified at any stage. The second one is a dynamic select object, i.e., its options and length change. The script in the <HEAD>…</HEAD> portion of the page defines a two-dimensional array. The first index is of the first select object (an integer from 0 to 2). The second index is an integer between 0 and the index of the last option of the second select object. The number of options in the second select object depends on the option selected from the first select object.

Sounds difficult, but it’s not! First you must understand what the script does. When the user selects an option from the first menu (select object), the second select object is updated with the corresponding option list. For example, if the second option in the main menu is selected, the script uses its index (1) to determine the array of elements (menu[1]) that should constitute the options of the second select object. For the sake of the example, we used text properties to identify the structure (1-1, 0-3, etc.).

When the user first loads the page, the first select object is laid out according to its HTML definition, while the second select object is generated via a JavaScript for loop which iterates over the menu[0] array and writes out its elements.

The first select object includes an onChange event handler that invokes the updateSub() function, passing, as arguments, the form and the selected index. The function is based on two loops. The first one deletes the current options of the second menu by assigning each a null value. The second loop adds new options to the second menu, according to the elements of the selected menu array. Notice that we did not add properties for all options, but rather only for the first option of each menu array (a value, a default property, and a defaultSelected property). The elements of the menu array are obviously instances of the Option object. The document is refreshed by history.go(0).

An instance of the Option object has the same structure as an element of a select object’s element array. Both objects include the same properties and none have methods.

FileUpload Object

HTML Syntax

A file upload element of an HTML form enables the user to supply a local file as input. This feature is fairly new and is not supported by MSIE 3.0. Generally speaking, its syntax is as follows:

<INPUT
 TYPE="file"
 NAME="fileUploadName">

Note that fileUploadName is not the name of the file, but rather the name of the form element that enables the user to supply the file.

JavaScript Access

The regular syntax is as follows:

[window.]document.formName.fileUploadName
[window.]document.formName.elements[index]
[window.]document.forms[index].fileUploadName
[window.]document.forms[index].elements[index]

Event Handlers

JavaScript for Netscape Navigator 3.0 still does not support any event handlers for this object. Look for onBrowse in future releases.

Methods

This object does not provide any methods either.

Properties

The file upload object combines two meaningless properties:

name

The name property initially reflects the NAME attribute of the HTML definition. You may set its value at any time.

value

This read-only property reflects the current value of the file upload element’s field—the name of the file to upload.

Summary

You deserve a reward if you had the motivation to read through this lengthy chapter. We believe that you have already been rewarded with the knowledge to implement interactive forms including their event handlers. Forms are a convenient means of collecting user’s input without producing annoying dialog boxes. Some form elements such as text objects and textareas also come in handy when you need to display changing output, such as a clock or a banner. Don’t worry if you do not remember every single method and property of the objects discussed in this chapter. This book will serve as an easy-to-use reference when you actually need to create a JavaScript-powered form. At this point, you should know the basics of and how to use form elements in JavaScript, and the properties, methods, and event handlers of text objects and regular buttons.

Table of Contents