Home Java Pass-value-example Pass value from iframe to parent
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Pass value from iframe to parent

Advertisement
iframe creates an inline frame in which we can put another page

Pass value from iframe to parent

     

iframe creates an inline frame in which we can put another page. We can pass values from iframe to the parent page with the use of java script. 

Here in our example of passing value from iframe to the parent we have created a HTML page which has one input text box and a "Submit" button which will call the hello() method of parent page on click. In parent page we have an input text component and an iframe which is containing the inputForm.html page.

Here is the code of main parent page PassValueIFrame.html as follows:

PassValueIFrame.html

<html>
  <head>
  <title>IFrame Example</title>
  <script language="javascript">
  function hello(string){
   var name=string
   document.getElementById('myAnchor').value=name;
   }
  </script>
  </head>
<body>
<iframe namne="iframe" id="iframe_id" src="inputForm.html" height="150" >
</iframe>
Name: <input type="text" id="myAnchor" >
</body>
</html>

This page calls the inputForm.html page into the iframe. Which value would be inserted into the inputForm.html would also be reflected to the parent page's input text. Code of inputForm.html is as given below:

<html>
<head>
   <title>IFrame Child Example</title>
</head>
<body>
<form name="frm2" >
<h1><font color="#000099">Input Form</font></h1>
<p>Name : </p><input type="text" name="resp" id="input" value=""/>
<input type="button" onclick="parent.hello(this.form.resp.value);" value="Submit" />
</form>
</body>

After filling name and clicking on the "Submit" button the inserted value in the iframe page would be reflected to the parent page.

Download Source Code

Advertisement

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: May 24, 2009

Ask Questions?    Discuss: Pass value from iframe to parent   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
rajesh
January 12, 2012
Issue in google chrome

I have downloaded the above code... it works fine in firefox,IE but it doesn't responsed in chrome.. is dre any one to help... Thnaks
P Elsner
March 17, 2012
Very helpful

Thank you for posting this. It was very helpful in getting my own project to work. Have been looking every where for 2 days to find a working example. Yours did the trick. Thanks again.
Ranger
April 18, 2012
Pass value from iframe to parent

Works great! Exactly what I needed. Thanks a bunch.
Jey
August 21, 2012
Thanx

Hi, Thank u very much that code is very useful.., Regards, Jey
Burak TARHANLI
September 7, 2012
Thank you!!

Thank you so much for your sharing. This is a good article. It works for me.
DMCA.com