how to transfer values between html pages?

Question

I'm opening new page from anothe like this:

var openedwidow = window.open(billhref, '', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, (screen.availWidth - w)/2)+',top='+Math.max(0, (screen.availHeight - h)/2));

the second html page looks like this:

<div class="row contractor_data__item">
  <label for="code">Номер</label>
  <input type="text" name="code" id="code" disabled/>
  <input type="hidden" name="documentId" id="documentId">
  <input type="hidden" name="actId" id="actId">
  <input type="hidden" name="actCode" id="actCode">
</div>

on the page opening in the new window I have a few fields to fill. For example, I've filled "code" field on the first page and need to fill the "code" field in the page opened. How to do this?

the second part of question is that I've filled some fields on the page opened, like documentId and need to pass it to the first page I've called this one from on close, for example or on the field filled. How to perfrorm this?

What is your server side language? This is usually done on the server side, — Koks_rs, Sep 29 '16 at 12:14
@Koks_rs I have no access to the server side if I understood you well. Actually I have only one place to manage this all - its the js on the button which is placed on the "first page". So I can get data from it, I also can post data to the fields but it could be easy if everything was on one page. In my case I can get data with js, somehow post it to the other page(which is on the other domain) and then I need to return it to the page, it opened from — Nikitin Mikhail, Sep 29 '16 at 12:20

shishir · Accepted Answer · 2016-09-30T06:31:56.447

In HTML5 you can use session to pass object from page to another:

// Save data to sessionStorage

sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage

var data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage

sessionStorage.removeItem('key')

For further reference you can check here

Edit: Sample Code: Page1.html

<!DOCTYPE html>
<html>
<head>
    <title>Page1</title>
    <script type="text/javascript">
        sessionStorage.setItem("name","ShishirMax");
        var fName = sessionStorage.getItem("name");
        console.log(fName);

        function myFunction(){
            window.open("page2.html");
        }
    </script>
</head>
<body>
This is Page 1
</br>
<button onclick="myFunction()">SendThis</button>
</body>
</html>

Page2.html

<!DOCTYPE html>
<html>
<head>
    <title>Page 2</title>
</head>
<body>
This is Page 2</br>
<input type="text" name="txtName" id="txtName" value="">
<script type="text/javascript">
        var fName = sessionStorage.getItem("name");
        console.log(fName);

        document.getElementById("txtName").value = fName;
    </script>
</body>
</html>

Try the following code for the test purpose.

I've executed sessionStorage.setItem('someThing', '1'); on the first page but executing var something = sessionStorage.getItem('someThing'); on the second page gives null in 'something' — Nikitin Mikhail, Sep 29 '16 at 13:19
say more pricesly there are some values in the session store, as I see via chrome dev tools, but the problem is the same: on the other page I can't get values — Nikitin Mikhail, Sep 29 '16 at 14:12
Have you tried to maintain the same session on both page, since the value will get lost once the session is closed. — shishir, Sep 30 '16 at 01:53

score 1 · Answer 2 · answered Sep 29 '16 at 12:20

1

hi if you want transfer data in some page you can use localStorage our sessionStorage in js

difference between sessionStorage clear when you close browser and localstorage will be clear only if you ask it

go refer to documentation for sintax e.g :

you value is stak in 'data' variable in this e.g

var data;
sessionStorage.setItem('nameyourvar', data);

after you can take on other page with :

sessionStorage.getItem('nameyourvar')

answered Sep 29 '16 at 12:20

InitialCrow

323
1
5

I've executed sessionStorage.setItem('someThing', '1'); on the first page but executing var something = sessionStorage.getItem('someThing'); on the second page gives null in 'something' – Nikitin Mikhail Sep 29 '16 at 13:20
say more pricesly there are some values in the session store, as I see via chrome dev tools, but the problem is the same: on the other page I can't get values – Nikitin Mikhail Sep 29 '16 at 14:13
yes if you change the domain you cant keep this value session storage or localstorage scope is on a window if you dont open window and you redirect in app sessionStorage keep value but if you want keep value for other site localstorage keep value but think to destroy after – InitialCrow Sep 29 '16 at 20:58
well, I've decide to work in one domain and now the trouble is that data placed to session storage are available when I open new window, next I add one more value to session storage and don't see it on the first page – Nikitin Mikhail Oct 02 '16 at 18:09
yes its complicate if you want to return the value in back the good pratcice is you need to set cookie if you set cookie you can manipulate has you want go at http://www.w3schools.com/js/js_cookies.asp – InitialCrow Oct 02 '16 at 19:40

score 1 · Answer 3 · edited May 23 '17 at 12:15

Use a query string. That's what they're for. Dont' forget to wrap your values in encodeURIcomponent in case they contain any special characters.

window.open("somewhere.html?firstname="+encodeURIComponent(firstname)+"&lastname="+encodeURIComponent(lastname)+"");

In the new window you can get the values from the query string like this

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var firstname = getParameterByName('firstname'); // "Bob"
var lastname = getParameterByName('lastname'); // "Dole"

Function is from here.

score 1 · Answer 4 · answered Sep 29 '16 at 12:36

Since other people are mentioning localstorage, you should know that localstorage isn't supported in all browser. If you're interested in using something like that (you should really use query strings instead) you can check out this cross browser database Library I wrote.

Set your items to the database on the first page

jSQL.load(function(){
    jSQL.createTable("UserData", [{FirstName: "Bob", LastName: "Dole"}]);
    jSQL.persist(); // Save the data internally
});

Get your items from the second page

jSQL.load(function(){
    var query = jSQL.query("SELECT * FROM `UserData`").execute();
    var row = query.fetch("ASSOC");
    var firstname = row.FirstName;
    var lastname = row.LastName;
});

mrid · Answer 5 · 2016-09-29T12:30:54.810

You can use GET parameters.

When you're opening second page, pass all the data you want to pass as GET parameters in the url, for example :

var billhref = "whatever.html?code=your_code&parameter2=parameter2_value" ;

var openedwidow = window.open(billhref, '', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, (screen.availWidth - w)/2)+',top='+Math.max(0, (screen.availHeight - h)/2));

Make a JS function to get parameters on the second page :

function getParams() {

    var params = {},
        pairs = document.URL.split('?')
               .pop()
               .split('&');

    for (var i = 0, p; i < pairs.length; i++) {
           p = pairs[i].split('=');
           params[ p[0] ] =  p[1];
    }     

    return params;
}

Then use this function to get url parameters like this :

params = getParams();

for( var i in params ){
    console.log( i + ' : ' + params[i] );
}

This will return output like :

code : your_code
parameter2 : parameter2_value

Using PHP will help you get around this problem with even shorter code

For example, in PHP, to get the parameters code, you'll just have to write :

$code = $_GET['code'];

And it will give you assign a variable named code the value you have passed in the url against code parameter( your_code in this example ).

how to transfer values between html pages?

5 Answers5