Lookup Lists: Printing the List - Doc JavaScript

Printing the List

As explained in the previous section, the start() function invokes printList() to print the lookup list:

function printList() {
  with (document) {
    write(
      '<FORM NAME="organizer" ',
      'onSubmit="display(); return false;">',
      '<TABLE BGCOLOR="#c0c0c0" CELLSPACING="0" ',
      'CELLPADDING="5" BORDER="2"><TR><TD>',
      '<TABLE BGCOLOR="#c0c0c0" CELLSPACING="0" ',
      'CELLPADDING="5" BORDER="1"><TR><TD>'
    );
    if ((NS4 || IE4) && !NS4MAC)
      write(
        '<INPUT TYPE="text" NAME="prefix" ',
        'SIZE="35" onFocus="active = true" ',
        'onBlur="active = false"><BR>'
      );
    write(
      '<SELECT NAME="list" SIZE="', size,
      '" onChange="update()">'
    );
    for (var i = 0; i < ar.length; ++i) {
      write('<OPTION VALUE="', ar[i].url, '">', ar[i].name);
    }
    write(
      '</SELECT><BR>',
      '<INPUT TYPE="submit" VALUE="Display">',
      '<INPUT TYPE="reset" VALUE="Cancel">',
      '</TD></TR></TABLE></TD></TR></TABLE></FORM>'
    );
  }
}

The value of the form's NAME attribute is organizer. The form is composed of several elements:

• A text field, NAME="prefix" (for Internet Explorer 4.0x and non-Macintosh Navigator 4.0x)
• A select menu, NAME="list"
• A submit button, VALUE="Display"
• A reset button, VALUE="Cancel"

The user can submit the form by clicking the button labeled "Display," or by pressing Enter when the cursor is located in the text field. In general, a form can be submitted via the Enter key when it consists of only one text field, and the cursor is currently located in that field.

When the user submits the form, the onSubmit event handler is triggered. It invokes the display() function, which loads the URL of the current selection:

function display() {
  var list = document.organizer.list;
  if (list.selectedIndex > -1) // if an option is selected
    location.href = list.options[list.selectedIndex].value;
}

Note that the selectedIndex property reflects the index of the selected option. For example, if the first option is selected, selectedIndex evaluates to 0. And if no option is currently is selected, it evaluates to -1.

Back to the printList() function. The onSubmit event handler returns false in order to cancel the form's submission. If we aren't really submitting the form, then why didn't we use a standard button instead of a submit button? The answer is simple. If we used a standard button to invoke display() via its onClick event handler, that would be the only way to call display(). By using the form's onSubmit event handler to call the function, the user can also load the desired page by pressing Enter within the text field.

Notice that the text field is only printed if the browser is Navigator 4.0x (except for the Macintosh version) or Internet Explorer 4.0x. Older browsers cannot detect key presses, so the "lookup" in "lookup lists" is irrelevant.

As explained earlier in the column, the script captures all keyup events that occur on the page. However, we don't want the script working overtime if the user didn't press the key within the text field. The global active variable determines whether the cursor is currently located in the text field. The field's onFocus event handler assigns it a true value when the user gives focus to the field, and the onBlur counterpart assigns it a false value when focus is removed from the field. active is a Boolean variable that keeps track of when the user is entering text in the text element. The script initializes active to false via a global statement.

When the user manually selects a new option from the menu, the onChange event handler invokes update() to display the full name of the new selection in the text box.

The printList() function uses a simple for loop to print the code for each site in the menu. Each site is represented as an OPTION element, whose value is the site's URL and text is the site's name.

Created: March 11, 1998
Revised: March 11, 1998

URL: https://www.webreference.com/js/column15/create.html