Child Windows

Arrays of Buttons

• Radio buttons and checkboxes usually appear in sets.
• Thus, it's logical to store them in arrays and process them with array techniques.
• When they have a common name, Javascript creates an array with that name.
• For example, the data in a form named winery

  <FORM NAME="winery" ACTION="whatever..." METHOD="POST">

  containing a set of radio buttons named wines

  <INPUT TYPE="RADIO" NAME="wines" VALUE="merlot">
  <INPUT TYPE="RADIO" NAME="wines" VALUE="chablis">

  can be accessed as:

  document.winery.wines[0],
  document.winery.wines[1], and so on.

Child Windows

• Radio buttons, of course.
• The form elements are accessed by name.
• Child windows are created by the window.open() method. Syntax:

  open ( URL, windowName, windowFeatures )

  where:

  URL is the URL to open in the new window.
  

  windowName is the name of the new window for use in the TARGET attribute of a <FORM> or <A> tag.

  windowFeatures is a string containing a comma-separated list including any of:

  • location
  • menubar
  • width
  • height
  • toolbar
  • status

Lab

Your task:

• Copy the example web page and modify it as follows.
• Enable the user to resize the child windows.
• In the example, each child window has a distinct name.
• The name is determined by the second argument in the window.open() invocation.
• In the example, the names are newWin1, newWin2, and newWin3.
• How is the behavior different when all the child windows are given the same name?

Solution

Don't peek unless you're stuck!

• Run it.
• Source code.

Extra for Experts

• When a wine is selected, instead of opening a static web page (from a hand-written HTML file), generate the content of the new page dynamically, using the document.write method. This method will be discussed in detail later in the course.
• Solution