How to pass a variable to a specific html page in javascript and call that variable when needed on that page

Question

I am new to html and javascript coding. So i have encountered a problem where i have to send a variable to a specific page and call that function out when needed.

function submit() {
  firstname = document.getElementByName("firstname");
  document.write(firstname);
}

<html>

<body>

  <form>
    <p>firstname: <input type="text" name="firstname" />
    </p>
    <input type="submit" onclick="submit()" />
    </from>
</body>

</html>

now what should i do if i want to display the first name on a specific html page in javascript. For example, if i want to display the person name on third page then what should i do.

Search for `javascript [create] query string`, here and elsewhere. — wazz, Jun 24 '18 at 08:54

score 3 · Accepted Answer · answered Jun 24 '18 at 08:59

When you need to pass on an information from one page to another in the web, the general way you do is to use server side sessions. As I can see that there's no server side languages you are using, I believe you have only two options:

Using Query String Parameters (this works all the time).
Using Cookies (if the user has enabled it).
Using Local Storage (if your browser supports it).

For the first option, see How can I get query string values in JavaScript? For the second option, it's been answered a lot of times, so I'll leave the implementation with you: Set cookie and get cookie with JavaScript.

For the second one, you just need to use localStorage object this way:

function submit() {
  var firstname = document.getElementByName("firstname");
  document.getElementById("output").innerHTML = firstname;
  if (!!window.localStorage) {
    localStorage.setItem('firstname', firstname);
  }
  return false;
}

<form onsubmit="return submit();">
  <p>firstname: <input type="text" name="firstname" /></p>
  <input type="submit" onclick="return submit();" value="Save" />
</form>
<div id="output"></div>

I have also made some changes in your form submission method. And in your new page, you just need to use this code to get the item.

function getname() {
  return localStorage.getItem('firstname');
}

I've been in the middle of writing it so just to not delete it, maybe will help :) **Cookies** [W3Schools](https://www.w3schools.com/js/js_cookies.asp) Cookies are data, stored in small text files, on your computer. When a user visits a web page, his name can be stored in a cookie. Next time the user visits the page, the cookie "remembers" his name. [JavaScript access using Document.cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) — robertgrzonka, Jun 24 '18 at 09:24
@robertgrzonka I would really recommend you to have a look at MDN than W3Schools. W3Schools are little bit outdated. [Aren't they?](http://w3fools.com) — Praveen Kumar Purushothaman, Jun 24 '18 at 09:30
Right, I found myself a lot of errors there, which is why I always search on more than one source :) I like to show W3S to others because their explanations are writen in more intuitive way that MDN, but of course you are totally right! — robertgrzonka, Jun 24 '18 at 09:40

score 0 · Answer 2 · answered Jun 24 '18 at 08:56

There are multiple ways to resolve this issue but it is based upon your requirements. Are you going to third or any other page via a server navigation or is it client-side navigation. In any case you can use localstorage which is supported by almost all latest browser.

On first page you can do localStorage.setItem('firstName', 'Tom'); localstorage is globally available keyword.

On any other page then you can get the value by

var name = localStorage.getItem('firstName');

Other options you can look at cookies, querystring and session storage

score 0 · Answer 3 · answered Jun 24 '18 at 08:59

when redirecting to next page, bind parameters in redirecting url like this,

window.location.href = "http://yoursite.com/page?data1=one&data2=two";

And fetch them from retreiving end like below,

var url_string = "http://yoursite.com/page?data1=one&data2=two";
var url = new URL(url_string);
var parameter_1 = url.searchParams.get("data1"); //returns "one"
var parameter_2 = url.searchParams.get("data2"); //returns "two"

How to pass a variable to a specific html page in javascript and call that variable when needed on that page

3 Answers3