How can I pass a value from one HTML page to another using JavaScript?

Question

This is my first HTML page:

<!--first.html-->   
<html>
    <body>
    <div data-role="page" data-theme="a" data-url="first" id="first"> 
        <form id="form1" name="form2" action="checking.html">
        <input type="text" name="txtFileName" id="txtFileName"/>
       <!-- <button onClick="uploadFile();">Upload</button> -->
       <input type="hidden" name="hidden1" value="">
       <br><input type="submit"  value="Send me your name!"  onClick="submitform();"><br>
       </form>
       <script type="text/javascript">
       function submitform()
       {
         document.forms.form1.hidden1.value=1;
         alert("i am working");

        document.form1.submit();
       }
    </script>

        </div>
    </body>
</html>

This is my second HTML page:

<!-- second.html -->
<html>
    <head>
    </head>
    <body> 
<h1>Javascript call after page loaded</h1>

<script>
function getQueryVariable2(variable) { 
  var query = window.location.search.substring(1); 
  document.write(query);
  var vars = query.split("&"); 
  document.write("<br />");
  document.write(vars);

  for (var i=0;i<vars.length;i++) { 
    var pair = vars[i].split("="); 
    if (pair[0] == variable) { 
      return pair[1]; 
    }
  } 
} 


document.write("<br />txtFileName = " + getQueryVariable2("txtFileName"));
document.write("<br />hid1 = " + getQueryVariable2("hid1"));
</script>
hellllo
</body>

Here I want to display the contents of hidden1 from first.html. Please suggest to me what code I should use for this.

@praveen People in stackoverflow can be as disgusting as a that guy, unfortunately. — Shinji, May 26 '16 at 20:18

score 8 · Accepted Answer · answered Sep 03 '11 at 17:18

8

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

1- create a sesison

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

2- read session:

sessionStorage.getItem('key')

check this example

answered Sep 03 '11 at 17:18

Alex

1,068
8
23

it is supported with firefox 3 and above, google chrome and ie9 – Alex Sep 03 '11 at 17:18

score 5 · Answer 2 · answered Sep 01 '11 at 08:06

5

Probably the best way in your case to use GET params like:

http://mysite//second.html?myparams=value

or if it's important or big data - use POST

answered Sep 01 '11 at 08:06

Samich

29,157
6
68
77

gettings the query string params already was [dicussed on stackoveflow](http://stackoverflow.com/questions/4656843/jquery-get-querystring-from-url) – Samich Sep 01 '11 at 08:09

score 1 · Answer 3 · answered Sep 01 '11 at 08:12

Found a solution for you to parse GET variables:

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

Get URL parameters & values with jQuery

Sanjeev Singh · Answer 4 · 2014-08-12T03:28:12.897

If you are not using html5, you have these ways to pass the value from one html to another - QueryString/GET/Cookies.

HTML5 provides two objects localStorage and sessionStorage to save the client data. Both allow user to store the data on local machine. Provides two methods - getItem('Key') and setItem('Key','Value') or we can just store the data in array of localStorage or sesionStorage;

// Store
localStorage.setItem("lastname", "abc");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

The sessionStorage object is similar to the localStorage object except it stores the data for only one session. The data is deleted when user closes the window.

to remove any item from session:

localStorage.removeItem("lastname");

to store as an array:

for (item in items) {
   localStorage[item] = AnyArray[item];
}

How can I pass a value from one HTML page to another using JavaScript?

4 Answers4

Linked