Pass value from iframe to parent

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:


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

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:

   <title>IFrame Child Example</title>
<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" />

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


Share on Google+Share on Google+

Pass value from iframe to parent

Posted on: May 24, 2009 If you enjoyed this post then why not add us on Google+? Add us to your Circles



Discuss: Pass value from iframe to parent   View All Comments

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
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.
April 18, 2012
Pass value from iframe to parent

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

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

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