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!

Answer 1

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

• code.google.com/p/sessionstorage/
• developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

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.

Answer 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

Answer 3

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

Answer 4

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;