How to pass a value from a parent window to another html page using javascript?

Question

I have 2 windows home.html and result.html.

In home.html I have a <textarea> #txtinput and a <button> #btn.

In result.html I have another <textarea> #txtresult.

On home.html, if I enter a value into #txtinput and click #btn, I want to open result.html and pass the value of #txtinput into #txtresult.

I've tried the below code from another post, which displays the value in the new window's body but won't display it in my element

var myWindow = window.open();
myWindow.document.body.innerHTML = document.getElementById("txtinput").value;

Is it somehow possible in a simple way? I am relatively new to JavaScript, my courses are ongoing now and I am just curious to know the ways to do it. Any detailed help will be very much appreciated!

Andrei Rînea · Accepted Answer · 2015-08-05 09:38:39Z

15

I hope i need to elaborate the below code

Button on click function in the home page:

function sample(){
    //this will set the text box id to var id;
    var id = document.getElementById("text_box_id").id;

    //the sessionStorage.setItem(); is the predefined function in javascript
    //which will support for every browser that will store the sessions.
    sessionStorage.setItem("sent", id); 

    //this is to open a window in new tab
    window.open("result.html","_blank");
}

Retrieve the value in result page:

$(document).ready(function(){
    //This sessionStorage.getItem(); is also a predefined function in javascript
    //will retrieve session and get the value;
    var a = sessionStorage.getItem("sent");
    alert(a);
});

For more information about sessionStorage

I have done same thing as above, am getting values in new window that's great, but that values I am getting only in documet.ready() function. So I am not able to use these values in my JSP. once I got values I need to display them in JSP.

edited Aug 5, 2015 at 9:38

Andrei Rînea

20.9k18 gold badges124 silver badges172 bronze badges

answered Nov 27, 2013 at 7:58

vivek

1961 silver badge3 bronze badges

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

1 Comment

locknies Over a year ago

That was a clean and nice explanation.. I got it and implemented it. good job vivek.

Timothy · Accepted Answer · 2014-06-12 18:10:18Z

2

I hope this code help you

This should be in home page:

function sample(id) {
    sessionStorage.setItem("sent", id);
    window.open("result.html","_blank");
}

This is another way in the same home page function:

function sample() {
    var id=document.getElementById("your_required_id").id;
    sessionStorage.setItem("sent", id);
    window.open("result.html","_blank");
}

This should be in result page:

function sample1() {
    var a=sessionStorage.getItem("sent");
    alert(a);
}

The id may be your text box id

edited Jun 12, 2014 at 18:10

Timothy

4795 silver badges8 bronze badges

answered Nov 26, 2013 at 14:45

vivek

1961 silver badge3 bronze badges

1 Comment

locknies Over a year ago

as i already said, iam a beginner by all means. it will be a great help if you please explain important lines (like sessionstorage and how they pass value), so that i can avoid google and learn it all from here itself or atleast get a better understanding.

Paul S. · Accepted Answer · 2013-11-26 15:17:10Z

1

In result.html, find the Window which opened it, using window.opener and then take your data of interest from that Window.

window.addEventListener('load', function () { // wait for ready
    var home = window.opener, txtinput, txtresult;
    if (home) {
         txtinput = home.document.getElementById("txtinput");
         txtresult = document.getElementById('txtresult');
         txtresult.value = txtinput.value;
    }
}, false);

In home.html, listen for a click on #btn and open result.html

// assuming button exists at invocation time
var btn = document.getElementById('btn');
btn.addEventListener('click', function () {
    window.open('result.html');
}, false);

answered Nov 26, 2013 at 15:17

Paul S.

66.6k9 gold badges129 silver badges143 bronze badges

1 Comment

locknies Over a year ago

i think this one is more simpler. i think i got the concept.

shayuna · Accepted Answer · 2017-10-16 16:07:17Z

0

i think that a simple assignment, using the window.opener handle from within the child window, is what you need:

if (window.opener) document.getElementById("#txtresult").value = window.opener.document.getElementById("#txtinput").value;

answered Oct 16, 2017 at 16:07

shayuna

4844 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to pass a value from a parent window to another html page using javascript?

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related