Make your own free website on Tripod.com
HOME
   inquiry.com
   Ask the Pros
   Ask the JavaScript Pro
ANSWERS
   Q & A
   Ask a Question
   Microsoft's
     Knowledge Base
RESOURCES
   Search
   Discussion Section
   Useful Sites
ABOUT
   Who is the Pro?
   Usage Policies
  

Q & A - How can a child window return data to its parent window?

Applies to These Versions Categories
Version Numbers Not Applicable
Forms
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 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:


<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. 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, 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.

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 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:

  • 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.)
  • If for some reason the parent window is closed before the child window communicates with it, the child window does not generate JavaScript errors.
  • 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.
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

Written by inquiry.com Staff on on 3/20/97.

Comments or problems with this site? Talk to us!
Copyright © 1998 by Fawcette Technical Publications, Inc. All rights reserved.