0

I have two html pages one is parent.htm and other is child.html where i have given href in parent.htm' tochild.html, here i have to access the elements ofparent.htminchild.html`, here are my two files

parent.htm

<!DOCTYPE html>
<html>


<body>
<form>
<input id=text1 type=text name="test2">
<a href="child.html" target="_self">Open kid</a>
</form>
</body>
</html>

child.html

<html>
<script type="text/javascript">
function parent(){
    //here i want to access values from parent.htm page, but does not work
var value = parent.getElementById('text1').value;
    var value2=top.getElementById('text1').value;
alert(value);
}
</script>
<body onload="parent()">
<form>
    </form>
</body>
</html>

Thanks in advance

MaheshVarma
  • 2,081
  • 7
  • 35
  • 58
  • Check this may be help you http://stackoverflow.com/questions/13151634/callback-function-call-when-child-window-is-close – Hkachhia May 29 '13 at 12:35
  • Any reason you couldn't just set cookies on the client and read them on the second page? – Tim May 29 '13 at 12:40
  • the requirement is to just use JS @Tim – MaheshVarma May 29 '13 at 12:41
  • You could set and read cookies with Javascript. You'd save the cookies when the link is clicked and read them into the second page on page load. – Tim May 29 '13 at 12:49

5 Answers5

2

Probably the easiest way to do what you want is through a cookie. It's a small text file stored on the client that can persist values across pages. If you don't specify an expiration date, the cookie will expire when the user closes their browser.

Cookie tutorial

Edit

Something else you could do is use Javascript to submit the form by clicking on the link. I think it's formname.submit() - which would allow you to read the values out of the form post. (Though it would be a little more work than just reading the cookie)

If you're only passing one or two fields I'd use the cookie. More than that you may want to consider submitting the form through Javascript.

Tim
  • 4,051
  • 10
  • 36
  • 60
1

You should be able to user window.opener to grab a reference to the parent window.

var parent = window.opener

I see -- you cannot access DOM elements from a previous page via javascript (AFAIK).

This is traditionally handled with HTTP post variables, passing the form variables collection to the subsequent page via some back-end procedures.

Or (as Moje notes) open the page in a new window so you can access the parent with window.opener

Faust
  • 15,130
  • 9
  • 54
  • 111
1

First change the following:-

<a href="child.html" target="_self">Open kid</a>

to :-

<a href="child.html" target="_blank">Open kid</a>

target="_self" means that the child page will open in the same parent window, effectively destroying the parent and its code.

Afterwards, access the parent's form textbox element with:-

var parentTextBox = window.opener.document.getElementById('text1');
mrmoje
  • 3,714
  • 3
  • 20
  • 18
1

I think you cannot do that, at least the way you are trying.

Once you clicked on "Open kid", your current page will be replaced by the new one, so you can't access that attribute.

You should be able to get around this by using cookies, passing the needed values in the url or with Web Storage.

Salem
  • 12,808
  • 4
  • 34
  • 54
1

parent.htm

<!DOCTYPE html>
<html>
  <body>
    <form method="GET" id="myform" action="child.html">
      <input id=text1 type=text name="test2">
      <a href="child.html" target="_self" onclick="document.getElementById('myform').submit();">Open kid</a>
    </form>
  </body>
</html>

child.html

<!DOCTYPE html>
<html>
<body onload="alert(window.location.toString().split('?')[1].split('=')[1])">

</body>
</html>

Might contain some typo, but the idea is to submit form by GET to the child and then read GET parameters from window.location after child.html is loaded.

ElmoVanKielmo
  • 10,907
  • 2
  • 32
  • 46