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
TrackBacks[0]
Comments[30]
Posted by pascarello on January 18, 2005 10:43:22 AM EST
Reply |
Permalink
Re: Passing Data from Child to Parent Form
hi this was very helpful, you mind your manners now
thank you
Comment from Anonymous on February 27, 2005 9:42:27 PM EST
Dear Sir,
How pass the value Parent window to child window, Give me a some solution
Regards,
R. Mahendran
Comment from R. Mahendran on April 29, 2005 4:37:50 AM EST
That is what the code above is doing...
Comment from Anonymous on May 1, 2005 9:47:36 AM EST
hi! thanks for your tutorial, i had a project that will pass the data from child to parent window, but not in the textbox, i want it to be passed to a combo box, i tried to modified your code, but it doesnt work. my code looks like this below:
<html> <head> <title>Test</title> <script type="text/javascript"> function OpenWindow(){ var winPop = window.open("testPop.htm","winPop"); } </script> </head> <body> <form name="form1"> <input type="text" name="text1"> <input type="button" name="button" value="Grab Info" onclick="OpenWindow()"> <table border="1" width="15%" id="table1"> <tr> <td> <FONT FACE="sans-serif"> <SELECT NAME="PICKED" SIZE="9""> <option>Item1</option> <option>Item3</option> <option>Item2</option> </SELECT></FONT></td> </tr> </table> </form> </body> </html> and my pop-up window code is like this: <html> <head> <title>Test</title> <script type="text/javascript"> function SendInfo(){ var txtVal = document.formPop.textPop.value; window.opener.document.form1.PICKED.value = txtVal; } </script> </head> <body> <form name="formPop"> <input type="text" name="textPop"> <input type="button" name="button" value="Send Info" onclick="SendInfo()"> </form> </body> </html> any help would be highly appreciated. tnx!
<html> <head> <title>Test</title> <script type="text/javascript"> function OpenWindow(){ var winPop = window.open("testPop.htm","winPop"); } </script> </head> <body> <form name="form1"> <input type="text" name="text1"> <input type="button" name="button" value="Grab Info" onclick="OpenWindow()"> <table border="1" width="15%" id="table1"> <tr> <td> <FONT FACE="sans-serif"> <SELECT NAME="PICKED" SIZE="9""> <option>Item1</option> <option>Item3</option> <option>Item2</option> </SELECT></FONT></td> </tr> </table> </form> </body> </html> and my pop-up window code is like this: <html> <head> <title>Test</title> <script type="text/javascript"> function SendInfo(){ var txtVal = document.formPop.textPop.value; window.opener.document.form1.PICKED.value = txtVal; } </script> </head> <body> <form name="formPop"> <input type="text" name="textPop"> <input type="button" name="button" value="Send Info" onclick="SendInfo()"> </form> </body> </html> any help would be highly appreciated. tnx!
Comment from Geoff on May 31, 2005 2:18:52 AM EST
Hi
I am trying to do passing value from parent to child but hte code is not working for me.
I tried with the code you provided.
Please let me know why it is not working.
I appreciate your help.
Comment from Anonymous on June 22, 2005 8:51:28 AM EST
You trying to add a new option?
Eric
var sel = window.opener.document.form1.PICKED;
sel.options[sel.options.length] = new Option("text","value");
Eric
Comment from Eric Pascarello on May 31, 2005 8:41:50 AM EST
What is the code block you put in the child window (testPop.html)? I want to be able to open the child window and select from radio buttons and hit submit and that data be passed to the parent window. Can this script work for that. I have been looking everywhere and this is about as close as I can find.
Thanks,
Aaron
Comment from Anonymous on June 2, 2005 4:51:00 PM EST
To pass data back, you need to use window.opener.document.formName.elementName.value = "what you want";
Eric
Comment from Eric Pascarello on June 2, 2005 8:03:20 PM EST
Thanks Eric but I'm a little new and slow to this. Do I need to add this code to the parent or the child window?
Comment from Anonymous on June 3, 2005 7:59:39 AM EST
In the child, create a function and call it when you click the button.
You can than close the child window with window.close(); Eric
You can than close the child window with window.close(); Eric
Comment from Eric Pascarello on June 3, 2005 12:27:30 PM EST
when you call SendToChild(data)
can you please give a little example. I being trying but it is not working
function SendToChild(data){
winPop.document.formPop.textPop.value = data;
}
Comment from SAMI on June 15, 2005 2:05:29 PM EST
Can you give a code example, for both pages, where on one page, a link opens a new popup window, which has images on it, and when the user clicks on one of these images, a text label associated with the image is passed back to the original window (the popup window closing); the original window then displays the chosen image, and the text label associated with the clicked image is entered into the text area of a form as if it had been selected?
Comment from nevdev on July 21, 2005 7:42:04 AM EST
nevde, the basic idea is below:
<u>Main Page:</u>
<u>Main Page:</u>
<html>
<head>
<script type="text/javascript">
var objActiveElem;
var winPop;
function GetImage(xElem){
objActiveElem = xElem;
winPop = window.open("imagePicker.html");
winPop.focus();
}
</script>
</head>
<body>
<form name="Form1">
<input type="text" name="txt1">
<input type="button" name="btn1" value="Get Value" onclick="GetImage(document.Form1.txt1)">
</form>
</body>
</html>
<u>PopUp Page:</u>
<html>
<head>
<script type="text/javascript">
function SetImage(xValue){
window.opener.objActiveElem.value = xValue;
window.opener.objActiveElem = "";
self.close();
}
window.onunload = function(){
window.opener.objActiveElem = "";
}
</script>
</head>
<body>
<form name="Form1">
<img id="img1" src="man.gif" onclick="SetImage(document.getElementById('spanImg1').innerHTML)"/><span
id="spanImg1">Pass Back Span Text</span><br/>
<img id="img2" src="man2.gif" alt="Passed alt text" onclick="SetImage(this.alt)"/>
</form>
</body>
</html>
Eric
Comment from Eric Pascarello on July 21, 2005 8:27:29 AM EST
Thank you for a particularly elegant solution to a problem that I had been grappling with for hours (these days, 'hours' is the equivalent to 'weeks' when it comes to grappling).
This technique is going to get a workout as I revise a lot of my lookup pages from pulldowns to pop-ups.
Thanks again.
GT
Comment from Geoffrey Transom on August 7, 2005 9:42:56 AM EST
That's fantastic! Except, after the selectio is made and the popup window closed, how can the original page display the chosen image, in a table, say?
Comment from nevdev on July 21, 2005 8:51:46 AM EST
basic idea:
onclick="GetImage(document.getElementById('imgId')"
and
onclick="SetImage(this.src)"
and
window.opener.objActiveElem.src = xValue;
Eric
onclick="GetImage(document.getElementById('imgId')"
and
onclick="SetImage(this.src)"
and
window.opener.objActiveElem.src = xValue;
Eric
Comment from Eric Pascarello on July 21, 2005 9:57:58 AM EST
Erm.. sorry I'm flummoxed: how do I include that in addition to the above code? I'm putting the "image id" as the alt tag, and returning that to the main page for display in the form field (great!), but I'd like the image returned as well, in an adjacent table... but there can't be onclick="SetImage(this.alt)" as well as onclick="SetImage(this.src)"... or window.opener.objActiveElem.value = xValue; as well as window.opener.objActiveElem.src = xValue; ... thanks for your help!
Comment from nevdev on July 21, 2005 11:00:53 AM EST
Sorry if that was a dumb question! But if I could return the selected image as well as the text, I'd have this nailed!
Comment from nevdev on July 21, 2005 12:36:55 PM EST
Hi Eric,
Is there any way to get the same effect using server side controls? Your example with the client input boxes works perfectly. I'm trying to do exactly what you do in your sample (pass some data back to parent form), but using asp buttons & text boxes.
I can't manage to get the correct javascript to execute when clicking the button on the client form:
private void Button1_Click(object sender, System.EventArgs e)
{
Response.Write("<script language=javascript>window.opener.document.Form1.Text1.value=document.form1.textPop.value;window.close();window.opener.focus;</script>");
}
Thanks in advance.
Comment from Natasha on October 4, 2005 2:49:01 AM EST
use the onclientclick method off of the button controls. that lets you define a javascript method to call.
Comment from Anonymous on June 28, 2006 6:41:54 PM EST
HOWTO when child and parent are on different domains?
Comment from Grant Greenwood on March 24, 2006 8:45:04 AM EST
JavaScript can not talk across domains for security reasons.
Eric
Comment from Eric Pascarello on March 24, 2006 12:01:27 PM EST
JavaScript can not talk across domains for security reasons. EricI glad I found this answer you wrote b4
I drove myself crazy trying to open a page
on another domain and pass a value to it's
lookup engine. the other is a frame based
layout so the whole page fails to load only
the results page loads. oh well back to the
old code.
Comment from Patrick on May 22, 2007 9:11:48 AM EST
Reply | Permalink Re: Passing Data from Child to Parent Form
What is the code block you put in the child window (testPop.html)? I want to be able to open the child window and select from radio buttons and hit submit and that data be passed to the parent window. Can this script work for that. I have been looking everywhere and this is about as close as I can find. Thanks, Aaron
Comment from Anonymous on June 2, 2005 5:51:00 PM EDT
Hi, Eric!
Thanks so far, for what you've given me! ;)
I kind of have the same problem as Mr. Anonymus got. And, I as well, are one hell of a newbee in this javascript-world.
So, My problem is; I have several images in a db, and these are printed as a thumb together with a radio-button. The user should now check the radio belonging to the wanted image. This worked fine when I only had 1 image in my db, but when I added som more, the script seems to be unable to collect the id-info from the selected radio-button.
The result is; "undefined". And that kind of sucks.. ;)
Thanks again!!
Comment from Ole Martin Kristiansen (Norway) on March 28, 2006 1:38:24 PM EST
This code is really interesting and thanks for sharing a knowledge.
Keep going..........
Cheers
Srinivas.N
Comment from Anonymous on April 4, 2006 8:06:46 AM EST
Eric,
I have a situation where I have a feedback form in a child window. When someone clicks a link from the parent to open the child, I want to autopopulate the URL of the parent into a text input field on the form on the child. Any thoughts?
Thanks!
Comment from Anonymous on April 12, 2006 12:58:00 PM EST
in the pop up try adding this
window.onload = function(){
document.forms[0].YourTextboxName.value = window.opener.location.href;
}
Eric
Comment from Eric Pascarello on April 12, 2006 1:27:32 PM EST
Eric I have been messing with this for over 6 hours now. Maybe you lend a hand.
Have a look at this and click the button.
http://www.adsonus.com/listings/register.php
Comment from Lance on May 6, 2006 3:38:38 PM EST
I have a child form with checkboxes created with the values from database. When I checked multiple values and submit the form The result in the parent form is; "undefined".
Any help is appreciated.
Comment from Anonymous on February 7, 2007 7:37:09 AM EST
Hi Eric, this code is really brill, Where iam having a problem is displaying the data in the child article that was sent by the parent. It works fine when it's on my local computer but once i place it on the internet the values don't pass to the child, i am using the setTimeout function with no luck, could you take a look please Eric, thanks
http://www.onlinepersonaltrainers.net/parent.htm
Comment from shane on April 25, 2007 8:20:35 AM EST
TrackBack to http://radio.javaranch.com/pascarello/addTrackBack.action?entry=1106063002000