[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1497
  • Last Modified:

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 ...
0
nikon70
Asked:
nikon70
  • 6
  • 5
2 Solutions
 
nikon70Author Commented:

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

0
 
Gurvinder Pal SinghCommented:
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
0
 
RobinSoftware EngineerCommented:
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

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
nikon70Author Commented:
for some reason this does not work in firefox but works in IE ... any reason why ?
0
 
nikon70Author Commented:
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

0
 
RobinSoftware EngineerCommented:
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.
0
 
nikon70Author Commented:
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.
0
 
RobinSoftware EngineerCommented:
Maybe I forgot some. Could you try the following code. This should work.

Going from a working situation, you can more easily add your new (php) code.


pageone.htm:

<html><head><title>test</title>
<script LANGUAGE="JavaScript"> 
function transferField() {
   dat=document.TheForm.name.value;
   document.getElementById('frame1').contentWindow.document.frmFood.favfood.value=dat;
}
window.onload=transferField;
</script> 
</head>
<body>

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

</body>
</html>

pagetwo.htm:

<html><head><title>test</title>
</head>
<body>
<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>
</body>
</html>

Open in new window

0
 
nikon70Author Commented:
thats great got it to work, how do i auto submit after i have entered the data?
0
 
RobinSoftware EngineerCommented:
Please try and replace the transferField() function with:


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

Open in new window

0
 
nikon70Author Commented:
perfect!! thanks!!

do you know anything about cross domain library calls?
0
 
RobinSoftware EngineerCommented:
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.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now