advertisement -- please support sponsors

forms, windows:
communicating between windows

How can a child window return data to its parent window?

Note: This article requires a JavaScript 3.0 compatible browser.
Suppose we had a form, called the "age entry form," whose sole purpose was to obtain the user's age. Suppose further that for users who don't know their age, there is a place on the form which users can click to bring up an "age calculator" child window (dialog box). After the user interacts with the age calculator and provides the requested information, the age calculator automatically computes the user's age, enters it into the first form, and then closes itself.

Does this sound difficult? You'll be surprised to learn how easy this is!

opening a child window

Click to see the age entry form. Please familiarize yourself with its behavior before continuing.

The source for the age entry form is shown below: 

<html>
 <head>
  <title>age entry form</title>
  <script>

function show_age_calculator ()
{
	open
	(
		"age_calculator.html",
		"age_calculator",
		"width=400,height=200"
	);
}

  </script>
 </head>
 <body>
  <form name=f action=record_age.cgi>
   How old are you?
   <input type=text name=age>
   <input type=submit value="send"><br>
   <small>
    (If you have forgotten,
    <a href="javascript:show_age_calculator ();">click here</a>
    and I'll help you figure it out.)
   </small>
  </form>
 <body>
</html>
As you can see, the age entry form is relatively simple. It contains a hyperlink that calls the show_age_calculator function, which in turns opens a new browser window showing the age calculator.

talking back to the parent

Next, let's examine the source for the age calculator: 
<html>
 <title>age calculator</title>
 <head>
  <script>

function exit ()
{
	age = parseInt (document . f . tya . value);
	age += 10;
	opener . document . f . age . value = age;
	close ();
}

  </script>
 </head>
 <body>
  <center>
   <form name=f onSubmit="exit (); return false;">
    How old were you 10 years ago?
    <p>
    <input type=text name=tya>
    <p>
    <input type=submit value="OK">
    <input type=button value="cancel" onClick="self . close ();">
   </form>
  </center>
 </body>
</html>
This is where things get a little tricky. The age calculator is nothing more than another form in another window. However, because the form's onSubmit event handler returns a false value, the form is never actually submitted anywhere. Instead, when the user attempts to submit the form by pushing the "OK" button, the form's onSubmit event handler calls the exit function.

As you can see, the exit function converts the form's text field to an integer, adds 10 to the value, and then copies the result into the parent window's text field.

The child window accesses the parent window through the child window's window.opener object.* Because the child window was opened by the parent window, the expression "window . opener" in the child window refers to the parent window's window object.

The last statement in the exit function is a call to the window's close method. This call does not actually close the window; rather, it schedules the window for closing when the interpreter runs out of script.

When the function returns, control is passed back to the form's onSubmit event handler, which finishes up with the statement "return false;". Returning a false value in the onSubmit event handler prevents the browser from submitting the form to a query server. This is important because if the form were submitted, the window . close method, executed earlier, would not be allowed to complete.

Once the event handler finishes, there is no more script to execute and the interpreter stops. The window, marked earlier for destruction, then closes.

For just a few lines of JavaScript code, this isn't bad! Look what we've done:

  1. A window containing a form (parent window) spawned an additional form window (child window).
  2. The child window obtained data from the user and passed it on to the parent window.
  3. The child window closed itself and returned control to the original form.

more than it appears

This is the part where I confess that the source code shown for the parent and child windows in the previous section is incomplete. In fact, it has been "stripped down" to show only the components necessary for a parent window to spawn a child and for a child window to communicate with its parent. If you are going to implement user-friendly multi-window forms, however, you should strongly consider going beyond this "basic functionality."

For example, in this demonstration:

How I implemented these features is a good topic for another full-length article, so I won't bother with the details here. However -- If you are brave enough to explore the real source code used in this demonstration, you are free to do so (at your own risk) by clicking on the buttons below.
Show real source code for:
age entry form age calculator

Charlton Rose
30 Jan. 1997