asked on

iframes: passing a value from a parent to its child iframe

I am trying to pass a value from pageone.htm which is the parent to its child iframe pagetwo.htm

sequence:
once the iframe page had loaded
i have a hidden textfield which is holding the value to be entered into the child frame form
once entered into the child frame to submit the form in the child frame

but i can not seem to get anything working.

Thanks for your help ...

nikon70

ASKER

pageone.htm

<html>
<body>
<form name="TheForm">
<input type=hidden name="name" value="cooking">
</form>
Form is hidden
<p>
<iframe style="width: 500px; height: 300px;" src="/iframe/pagetwo.htm"></iframe>
</body>
</html>


pagetwo.htm

<FORM action="http://mysite.com/" method="post">
    <P>
    <LABEL for="favfood">fav food: </LABEL>
    <INPUT type="text" id="favfood"><BR>
    <INPUT type="submit" value="Send"> <INPUT type="reset">
    </P>
 </FORM>

Open in new window

Gurvinder Pal Singh

A frame value can be accesed by
window.frameName.document.getElementById('elementId1').value
or
window.frames[0].document.getElementById('elementId1').value

This link is useful in understanding the relation ship between child frame and parent frame.
http://www.yourhtmlsource.com/javascript/scriptingframes.html
http://www.java2s.com/Tutorial/JavaScript/0420__HTML-Tags/Referencetheparentframe.htm
http://www.webmasterworld.com/forum91/5212.htm

Robin Uijt

Use the code below:

The changes are:

* transferFields() is called to move the contents of the hidden form to the iframe field
* named the iframe 'frame1'
* named the form in the iframe file 'frmFood'
* named the field in the iframe form 'favfood'

pageone.htm 
 
<html><head><title>test</title>
<script LANGUAGE="JavaScript"> 
function transferField() {
   dat=document.TheForm.name.value;
   window.frame1.frmFood.favfood.value=dat;
}
window.onload=transferField;
</script> 
</head>
<form name="TheForm"> 
<input type=hidden name="name" value="cooking"> 
</form> 
Form is hidden 
<p> 
<iframe name="frame1" style="width: 500px; height: 300px;" src="/iframe/pagetwo.htm"></iframe> 
</body> 
</html> 
 
 
pagetwo.htm 
 
<FORM name="frmFood" action="http://mysite.com/" method="post"> 
    <P> 
    <LABEL for="favfood">fav food: </LABEL> 
    <INPUT type="text" id="favfood" name="favfood"><BR> 
    <INPUT type="submit" value="Send"> <INPUT type="reset"> 
    </P> 
 </FORM>

Open in new window

nikon70

ASKER

for some reason this does not work in firefox but works in IE ... any reason why ?

nikon70

ASKER

i have made a few tweeks to this to encorporate it into my site. and now even in IE it will not enter the data into the iframe text field.

pageone.php

<html><head><title>test</title>

<script LANGUAGE="JavaScript"> 

function transferField(data) {

   dat=data;
   window.frame1.frmFood.favfood.value=dat;

}


</script> 

</head>
<body>

<form name="TheForm"> 
<input type=hidden name="name" value="cooking"> 

</form> 
<p> 
<iframe name="frame1" style="width: 500px; height: 300px;" src="/iframe/pagetwo.htm"></iframe> 


<?
$filename = "/home/content/t/o/m/tomjoffe/html/iframe/file.txt";
$fd = fopen ($filename, "r");
$contents = fread ($fd,filesize ($filename));
fclose ($fd);
$delimiter = ";";
$splitcontents = explode($delimiter, $contents);
$data = $splitcontents[0];
unset($splitcontents[0]);
$newcontents = implode($delimiter,$splitcontents);
$fd = fopen ($filename, "w+");
fwrite($fd, $newcontents);
fclose ($fd);
print "<script>transferField('$data');</script>";
?>


</body> 
</html> 


pagetwo.htm 
 
<FORM name="frmFood" action="http://mysite.com/" method="post"> 
    <P> 
    <LABEL for="favfood">fav food: </LABEL> 
    <INPUT type="text" id="favfood" name="favfood"><BR> 
    <INPUT type="submit" value="Send"> <INPUT type="reset"> 
    </P> 
 </FORM>

Open in new window

Robin Uijt

Just being firefox? :-)

Change the transferField() function to:

function transferField() {
dat=document.TheForm.name.value;
document.getElementById('frame1').contentWindow.document.frmFood.favfood.value=dat;
}

and give the iframe also an id, like:

<iframe id="frame1" name="frame1" style="width: 500px; height: 300px;" src="iframe.htm"></iframe>

This should work in IE and FF.

nikon70

ASKER

this throws error in IE favfood is null or not an object
still not working in FF :(

can you take a look at my recent code paste as this is how it is working now.

ASKER CERTIFIED SOLUTION

Robin Uijt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nikon70

ASKER

thats great got it to work, how do i auto submit after i have entered the data?

SOLUTION

Robin Uijt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nikon70

ASKER

perfect!! thanks!!

do you know anything about cross domain library calls?

Robin Uijt

Not that much. And probably better if you make a new question for it, in the right sections, so the
right (who know more! :) ) people can respond too.