• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 5. Working With Browser Windows > Updating One Window from Another

Updating One Window from Another

If you deal with forms and data entered by your users, you'll want to know how to send information entered in one window to another window for display. You might use this in a situation where you are selling a product to replicate the user's information in a summary window. In this example, we'll use two windows: the main window is the parent window, which will receive and display information entered in a child window. Script 5.6 shows the script for the parent window.

To update one window from another:

							newWindow = window.open("child.html", "newWin", "toolbar=yes,location= yes,scrollbars=yes,width=300, height=100")


This line of script in the parent window tells the browser to create the child window, using the child.html file. The rest of the line specifies the child window's parameters (Figure 5.6).

Figure 5.6. The child window is where the user enters data.

								<FORM NAME="outputForm" ACTION="none">

There is a rudimentary form on the parent page (Figure 5.7), designed so that the script can easily fill in a text field with the information it will be getting from the child window. This line opens the FORM tag and gives the form a name.

Figure 5.7. The initial parent window.

   <INPUT TYPE="TEXT" SIZE="20" NAME="msglline" VALUE"">

This line specifies that the form will contain text with a maximum length of 20 characters, and names the text field msgLine. It also initializes the field with a string of length 0, that is, it starts out with the field empty, and closes the FORM tag.

Script 5.6. The parent window script.

Script 5.7. The child window script.

Now look at the script from the child window (see Script 5.7).

								function updateParent(textField) {

Here you create the updateParent function. The textField variable is the contents of the form in the child page.

								opener.document.outputForm. msgLine.value = "Hello " + textField.value + "!"


This line introduces the opener property, which is how JavaScript references back to the parent document that opened the child window. This line tells the opener document window to look at the form outputForm, find the field called msgLine, and insert the value of the expression after the equals sign. That expression takes the word "Hello", adds on the value of textField, then appends an exclamation point.

								<FORM ACTION="none">
								<INPUT TYPE="TEXT" onBlur= "updateParent(this)" SIZE="20">

This is the FORM tag in the child HTML page. It sets up the text field, and says to run the updateParent function onBlur, that is, when the user leaves the text field after entering data. The result in the parent window is seen in Figure 5.8.

Figure 5.8. The updated parent window after calling information from the child window.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint