Log in

View Full Version : get value from inner iframe page


hakimade
05-12-2014, 12:00 AM
how can i get value from inner iframe page, i have tried the bellow code but not working for me can some one help me out

parent.htm


<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="child.htm"></iframe>



<p ></p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var x = document.getElementById("myframe");

var y = (x.contentWindow || x.contentDocument);

if (y.document)
{
y = y.document;
y.getElementsByTagName("input")[0].value;
alert(y);
}
}
</script>

</body>
</html>


child.htm



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body bgcolor="#000000">
<form action="" method="post" name="myform" id="myform">
<table width="200" border="1">
<tr>
<td width="81" align="left">firstname</td>
<td width="103"><input type="text" name="fname" value="John" id="fname" /></td>
</tr>
<tr>
<td align="left">lastname</td>
<td><input type="text" name="textfield2" value="petter" /></td>
</tr>
</table>

</form>
</body>
</html>
jscheuer1
05-12-2014, 01:14 PM
Two things. First you are not asking it to alert the value, you are asking it to alert the document:


if (y.document)
{
y = y.document; //last assignment to y is the document.
y.getElementsByTagName("input")[0].value; //this does nothing, it's like saying "John" to the interpreter, but nothing is assigned.
alert(y); //if the rest of the code is working, this alerts 'HTMLDocument" or similar, or there could be a type mismatch and no alert.
}

If you want to alert the value of the input as indicated, do:


if (y.document)
{
y = y.document;
y = y.getElementsByTagName("input")[0].value;
alert(y); //now this alerts "John"
}

Now it will work. That is unless the browser has any reason to think that these two pages are not of the same origin. When testing locally, for some browsers that means that they must both be in the same folder. There could be other problems with local testing. So it's best to test live. Once live, the only requirement is that both pages be on the same domain.
molendijk
05-12-2014, 01:16 PM
parent.htm:

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>&nbsp;</title>
<script>
function myFunction()
{
var y=frames.myframe.document
if (y)
{alert(y.getElementsByTagName("input")[0].value);}
}
</script>
</head>

<body >
<iframe name="myframe" src="child.htm"></iframe>
<p ></p>
<button onclick="myFunction()">Try it</button>
</body>

</html>
jscheuer1
05-12-2014, 08:12 PM
Right, either way. Whether you're accessing the iframe as an element on the page (as you originally have), or as an instance of the window's frames object (as Arie does, and as is more direct in both his and my opinion - but it can be done either way), once you have a reference to the document of the page in the iframe, you still need to use the reference to the input's value in the alert in order to get what we think you're after.