Previous Page
Next Page

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 6.6 and Script 6.7 show the parent and child HTML pages, respectively. Script 6.8 shows the script, which is called from both the parent and child windows.

Script 6.6. The HTML for the parent window.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Big Window</title>
     <script language="Javascript" type="text/javascript" src="script05.js">
     </script>
</head>
<body bgcolor="#FFFFFF">
<div align="center">
     <h1>Welcome to this page!</h1>
     <form action="#">
        <input type="text" size="20" id="msgLine" readonly="readonly" />
     </form>
</div>
</body>
</html>

Script 6.7. The HTML for the child window.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Little Window</title>
     <script language="Javascript" type="text/javascript" src="script05.js">
     </script>
</head>
<body bgcolor="#FFFFFF">
     <h1>What's your name?</h1>
     <form action="#">
        <input type="text" id="childField" size="20" />
     </form>
</body>
</html>

Script 6.8. This script is called from both the parent and child windows.

window.onload = initWindows;

function initWindows() {
     if (document.getElementById("childField")) {
        document.getElementById("childField"). onchange = updateParent;
     }
     else {
        newWindow = window.open("child.html", "newWin","status=yes,width=300, height=300");
     }
}

function updateParent() {
     opener.document.getElementById("msgLine"). value = "Hello " + this.value + "!";
}

To update one window from another:

1. 
window.onload = initWindows;



When the window loads, call the initWindows() function.

2. 
if (document.getElementById ("childField")) {
  document.getElementById ("childField").onchange = updateParent;
}



The script is called by both HTML pages (the parent and the child pages), but it needs to do different things for each file. The way it tells which one it's on is to check for the existence of the childField object, which only exists in the child window. If we're there, and the user changes the object, then we call the updateParent() function.

3. 
else {
  newWindow = window.open("child. html","newWin","status=yes, width=300,height=300");



If the childField object doesn't exist, it's time to open the child window, using the child.html file. The rest of the line specifies the child window's parameters. (Figure 6.7).

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


4. 
function updateParent() {



Here we create the updateParent function.

5. 
opener.document.getElementById ("msgLine").value = "Hello " + this.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 (that is, the parent) window to find the field called msgLine and set its value to the word "Hello" and the contents of this.value, ending with an exclamation point (Figure 6.8).

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


Tips

  • Forms, fields, and how to script them are covered in depth in Chapter 7, "Form Handling."

  • In Script 6.6, we've added the readonly="readonly" attribute to the parent window's msgLine field. It just makes it clear that visitors to your site can't edit that themselves; it can only be set elsewhere.



Previous Page
Next Page