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
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
