Q & A - How can a child window return data to its parent window?
|Applies to These Versions
Version Numbers Not Applicable
How can a child window return data to its parent window?
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 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, then closes itself.
Does this sound difficult? You'll be surprised to learn how easy it is!
Opening a child window
Please familiarize yourself with its behavior before continuing.
The source for the age entry form is shown below:
As you can see, the age entry form is relatively simple. It contains a hyperlink that calls the
<title>age entry form</title>
function show_age_calculator ()
<form name=f action=record_age.cgi>
How old are you?
<input type=text name=age>
<input type=submit value="send"><br>
(If you have forgotten,
and I'll help you figure it out.)
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:
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
function exit ()
age = parseInt (document . f . tya . value);
age += 10;
opener . document . f . age . value = age;
<form name=f onSubmit="exit (); return false;">
How old were you 10 years ago?
<input type=text name=tya>
<input type=submit value="OK">
<input type=button value="cancel" onClick="self . close ();">
onSubmit event handler returns a
false value, the form is never actually submitted. Instead, when the user attempts to submit the form by pushing the "OK" button, the form's
onSubmit event handler calls the
As you can see, the
exit function converts the form's text field to an integer, adds 10 to the value, 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, closes.
- A window containing a form (parent window) spawned an additional form window (child window).
- The child window obtained data from the user and passed it on to the parent window.
- The child window closed itself and returned control to the original form.
More than meets the eye
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.
The child window (age calculator) stays on top of the parent window (age entry form) until the child window has finished its business. (Actually, there are a few ways to defeat the system, but they are not easy.)
The child window provides feedback to the user when it is finished.
After entering data into the child window, the user can either push the "OK" button or simply press enter.
Data entered into the age calculator's text field is confirmed to be a number before it is actually used. (The value of the number is not checked, however.)
Keyboard focus is automatically placed in the text field when either of the two forms pops up.
Written by inquiry.com Staff on
Comments or problems with this site?
Talk to us!
Copyright © 1998 by Fawcette Technical Publications, Inc. All rights reserved.