A Handout
Lem: "I got fired from my job as a bank guard."
Clem: "That's awful. What happened?"
Lem: "Well a thief came in to rob a bank. I drew my gun. I told him that if he
took one more step, I'd let him have it."
Clem: "What did thief do then?"
Lem: "He took one more step so I let him have it. I didn't want that stupid gun
anyhow!"
Passing Data from Parent to Child Form
Passing information back and forth from the child window to the parent window is
rather easy once you learn how to reference the window object. This will allow you
to use a pop up window to grab information from a database, calendar, etc.
You most likely know to open a pop up window you need to use window.open. If you
have trouble making pop up windows, you can always use my generator here. When
you open the window you need to set it to a variable so the object is stored. For
example:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function OpenWindow(){
var winPop = window.open("testPop.html","winPop");
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text1">
<input type="button" name="button" value="Grab Info"
onclick="OpenWindow()">
</form>
</body>
</html>
You will need this when you want to pass the information to the child (pop up)
window. In the example above note that I have also added a form with a text field
and a button. The text field will be filled in via the pop up window.
To do this you need to write some code in the pop up window. You can reference the parent window (the one that opened the pop up) with the window object reference window.opener. Then you just reference the document form filed like you normally do.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function SendInfo(){
var txtVal = document.formPop.textPop.value;
window.opener.document.form1.text1.value = txtVal;
window.close();
}
</script>
</head>
<body>
<form name="formPop">
<input type="text" name="textPop">
<input type="button" name="button" value="Send Info"
onclick="SendInfo()">
</form>
</body>
</html>
As you can see I also added window.close to close the pop up window. FYI: You can
not do window.opener.close() without a security warning. That is there so people
do not transfer you away to a site you do not want to go to. There are some ways
to get around that with some browsers, but I am talking about that here.
Now you can pass data from the parent to the child by using the window object reference along with the form name. For example:
winPop.document.formPop.textPop.value = variableData;Now if you want to pass the information as soon as the window opens, you have a slight problem. If you do it right after the window.open statement, you get an error. Reason, the page has not rendered the form elements yet. Therefore you need to add a pause, you can do that with a simple setTimeout.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var winPop;
function OpenWindow(){
winPop = window.open("testPop.html","winPop");
var theDate = new Date();
setTimeout("SendToChild('" + theDate.toLocaleString() + "')",10);
}
function SendToChild(data){
winPop.document.formPop.textPop.value = data;
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text1">
<input type="button" name="button" value="Grab Info"
onclick="OpenWindow()">
</form>
</body>
</html>
Now you may say, I want to pass data from the parent to the child so the child
page's server side code can use it. If this is the case, you would need to pass it
with a query string.
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages