How to access one HTML form elements in other HTML form using java script?

Question

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

Check this may be help you stackoverflow.com/questions/13151634/… — Hkachhia
– Hkachhia, Commented May 29, 2013 at 12:35
Any reason you couldn't just set cookies on the client and read them on the second page? — Tim
– Tim, Commented May 29, 2013 at 12:40
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
– Tim, Commented May 29, 2013 at 12:49

Tim · Accepted Answer · 2013-05-29 13:03:54Z

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.

edited May 29, 2013 at 13:03

answered May 29, 2013 at 12:56

Tim

4,10910 gold badges39 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mrmoje · Accepted Answer · 2013-05-29 12:49:07Z

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');

answered May 29, 2013 at 12:49

mrmoje

3,7303 gold badges23 silver badges19 bronze badges

2 Comments

MaheshVarma Over a year ago

My requirement is to open the child.html in same page @Moje

mrmoje Over a year ago

@MaheshVarma have you considered asynchronously loading the child's html UI and displaying it after hiding the parent's UI?

Salem · Accepted Answer · 2013-05-29 12:50:42Z

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.

answered May 29, 2013 at 12:50

Salem

13k4 gold badges37 silver badges56 bronze badges

Comments

Faust · Accepted Answer · 2013-05-29 12:51:08Z

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

edited May 29, 2013 at 12:51

answered May 29, 2013 at 12:38

Faust

15.5k10 gold badges58 silver badges116 bronze badges

1 Comment

MaheshVarma Over a year ago

But I'm not opening a new window by using 'window.open()', it's just href link @faust

ElmoVanKielmo · Accepted Answer · 2013-05-29 13:03:10Z

0

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.

answered May 29, 2013 at 13:03

ElmoVanKielmo

11.4k2 gold badges35 silver badges51 bronze badges

3 Comments

user447356 Over a year ago

Good idea, here's a fiddle showing something similar in action.

ElmoVanKielmo Over a year ago

Thanks @ShadowWizard - my sample code is rather dirty, but we don't know what is he going to do with grabbed values. So I just made this ugly one-line alert :)

user447356 Over a year ago

Yep that's the general idea, my fiddle contains more generic approach.

Collectives™ on Stack Overflow

How to access one HTML form elements in other HTML form using java script?

5 Answers 5

Comments

2 Comments

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related