CODEWITHSUNDEEP
javascripthtml
user2329318
user2329318

Reputation: 113

Sharing a variable between multiple html pages

I have a class project to create html page(s) with javascript without using any server side communications, the first is about user input an specially numbers. In the first page an instructor must enter information about his class an its students number, and then when done, he clicks next and a new page opens asking for each student information and grades. But when changing from the first page to the second the variable of the students number becomes undefined. I'm using this part 

var  snum;

function savesnum(val){
snum =val;}

And also tried,

var snum;
function savesnum(){
snum = document.getElementById('stunb').value; }

Upvotes: 7

Views: 52354

Answers (4)

Xotic750
Xotic750

Reputation: 23502

Here is an example of using window.localStorage to pass data between two html pages being served on the same domain. This will not work accross different domains because of the Same-origin policy.

The example consists of two pages hosted on jsfiddle.net but you could just as easily serve these files from your local file system. Either way there is no server side communication involved in this example.

The first page allows the user to enter some text in a textarea element. There is a save button which when clicked will fire a click event that executes the save handler (the anonymous function specified as the second attribute of addEventListener) that gets the user entered text and saves it in localStorage with the key mySharedData

Page 1 on jsfiddle

HTML

<textarea id="input"></textarea>
<div>
    <button id="save">Save</button>
</div>

Javascript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */

(function (global) {
    document.getElementById("save").addEventListener("click", function () {
        global.localStorage.setItem("mySharedData", document.getElementById("output").value);
    }, false);
}(window));

The second page recalls the saved text from the key mySharedData that is in localStorage and displays it in the textarea

Page 2 on jsfiddle

HTML

<textarea id="output"></textarea>

Javascript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */

(function (global) {
    document.getElementById("output").value = global.localStorage.getItem("mySharedData");
}(window));

Both examples are wrapped in an anonymous closure which is executed immediately, and into which we pass the window object which we then reference as the variable named global.

Finally, the first line is a comment, but not any old comment; it is an instruction that is used by jslint; a static code analysis tool used in javascript software development for checking if JavaScript source code complies with coding conventions set out by Douglas Crockford.

Alternatives would be to use:

cookies, once again the Same-origin policy would apply.

or

URL query-strings which would be part of the address used when taking you to the next page, where it can be read in Javascript to obtain data.

Upvotes: 19

Ravi K Thapliyal
Ravi K Thapliyal

Reputation: 51721

When you write

var snum;

that just creates a Javascript variable.

It doesn't even add snum to the DOM (Document Object Model) of the same page. Which is what you're trying to do (although on a different page) with:

document.getElementById('stunb').value;

You can call getElementById() only to get a DOM node/element like a <p id="mainText"> paragraph node. To pass around values from one page to the other you can use:

  • Cookies
  • URL parameters (like google.com/search?q=parameter+value)

There are other methods as well but they would require some server side code.

In your case you can pass the number of students as follows:

<form action="nextPage.html">
    Number of Students: <input type="text" name="snum" />
    <input type="submit" value="Next" />
</form>

On nextPage.html

<script type="text/script">
<!--
    var snum = location.search.substr(location.search.indexOf("=")+1);
    alert(snum); // assumes snum will be sent as "nextPage.html?snum=10"
//-->
</script>

Upvotes: 0

OdinX
OdinX

Reputation: 4211

Look into using cookies:

http://www.w3schools.com/js/js_cookies.asp

A cookie is a variable that is stored on the visitor's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values.

function savesnum(val) {
    document.cookie = 'snum:'+val; //Set the cookie
}

function getsnum() {
    var start = document.cookie.indexOf('snum:'); //Get the location of the cookie value
    var stop = document.cookie.indexOf(';'); //Get the end of the cookie value

    return document.cookie.substring(start+5, stop); //Return the value of the cookie (+5 because 'snum:' is 5 chars long)
}

Upvotes: 1

Sean
Sean

Reputation: 3052

when you window open a new page or redirect to a new page, you are on a new window object, you are not able to get the "snum" which is defined on the first window object as a global variable.

in this case you can pass the snum as a "get" parameter alone with the url and get the parameter at the new window.

Upvotes: 0

Related Questions