Click to See Complete Forum and Search --> : pass data from window to window
gregartemides
01-14-2004, 12:54 AM
I have a page, Page1.htm containing a form with a textfield, and a link which pops up another page, Page2.htm. Page2.htm contains an iframe.
When I press the link on Page1 to popup Page2, I would like to pass the text in the textfield on Page1 to the iframe on Page2.
Finally I would like to do the reverse. Pass the text from the iframe in page2 to the textfield on page1, by clicking a link on page2.
How do I do that?
Pittimann
01-14-2004, 02:18 AM
Hi!
To avoid too much code, just a rudimentary example.
Page1.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var toBeTransferred;
function openWin(){
toBeTransferred=document.forms[0].textP1.value;
newWin=window.open('Page2.htm','','width=450,height=300');
}
//-->
</script>
</head>
<body>
<form>
<input type="text" name="textP1"><br>
<a href="javascript:openWin()">open Popup</a>
</body>
</html>
Page2.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<iframe src="Page3.htm" name="i1"></iframe>
<br>
<br>
</body>
</html>
Page3.htm (in iframe):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function getIt(){
document.forms[0].itext1.value=parent.window.opener.toBeTransferred;
}
function transfer(){
parent.window.opener.document.forms[0].textP1.value=document.forms[0].itext2.value;
}
//-->
</script>
</head>
<body onload="getIt()">
<form>
Text from parent: <input type="text" name="itext1"><br>
Text to parent: <input type="text" name="itext2"><br>
<input type="button" value="transfer" onclick="transfer()">
</form>
</body>
</html>
Please remove the space in "javascript:openWin()" in Page1.htm...
Cheers - Pit
It depends on which way you want to pass the values. I sent you an example in attachment.
I put the functions in iframe. Now, from iframe to his parent, the refere is parent.. From that parent to the main page is window.opener.. Obviousely, the whole concatenate referenece, from iframe to first page is:
parent.window.opener.document..... and the rest of ref
I see that Pittiman send you a quite identical code... That means we though almost the same the solving of your problem... No offence Pittiman, I was working on the problem while you were sending the result, I have not seen you have already give him a response :)
Pittimann
01-14-2004, 02:37 AM
Hi!
To Kor: there is a proverb in German, which (used in this context) means:
better to solve a problem twice than never :p
Cheers - Pit
:D yea...
There is a more sophisticated solution by setting up a new Objectand sent the reference using this as parameter, but I thought in this case, the same you did, that a simplier code is a better ideea...
gregartemides
01-14-2004, 03:18 AM
Kor & Pittimann Thanks !!! Thanks !!! Thanks !!!
Just what I needed, and amazing how you guys thought of the same solution.:) :)
One further question to increase my JS knowledge:
Is opener used to give me access to the window that opened the popup? I haven't seen this object before.
Pittimann
01-14-2004, 03:23 AM
Hi!
You're welcome!Is opener used to give me access to the window that opened the popup?
Yes! Just use it, like Kor and me suggested: window.opener...
Cheers - Pit
Is opener used to give me access to the window that opened the popup
Yeap. The concatenating the ref is the main ideea. For instance, if you open a popup up from another popup (in different windows _blank) the back ref goes like
window.opener.window.opener
The popups are opened usually with a "name", so is easy to refere them after their name, but as the main page has no name, it needed a referenece, so here it is the opener.
Things are quite the same when using frames or iframes. T o refere a frame/iframe there is
top.frames[name].
while to refere the parent there is:
parent.
gregartemides
01-14-2004, 04:46 AM
Ok, 'opener' understood. Thanks.
Now, I want to have many textfield on my Page1.htm. So I need a way for Page3 to know which textfield on Page1 sent the info, so that I can return it to the right one after modification. How do I do that?
Before I try an answer (but your question seems to confused me a little) you must know that is not absolutely necessary to refere an element by his name (id). You may use his order number (the way I did with the form) in square brackets:
document.forms[0].elements[0] is the first element of the first form
document.forms[0].elements[1] is the second, and so on
To refere all, use a loop
for(i=0;i<document.forms[0].elements.length;i++){
document.forms[0].elements[i]
}
Now, if this is not enough, let's see:
you want to transfere some values from some inputs to a single input in page3? Or you want to have the same number of inputs in both pages? Can you detail, please?
gregartemides
01-14-2004, 06:33 AM
Have a look at the attached zip.
This is the script submitted by Pittimann, but I have added 2 more textfield on page1.
When I press 'openpopup', I want the script to pass the id and value of the textfield that had the focus to page3. Then when I press 'transfer' on page3, to return the value to the same textfield on page1.
Any ideas?
gregartemides
01-14-2004, 07:17 AM
ok I got it, have a look at the attached zip.
It uses onBlur on each textfield to pass the textfield object to a global variable. Then page3 can access the value of the object in this global variable.
I'm a php programmer, quite new to javascript. I have to say I am hooked!
Thanks for all the help again