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
– Shinji, Commented May 26, 2016 at 20:18

Alex · Accepted Answer · 2011-09-03 17:18:06Z

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 3, 2011 at 17:18

Alex

1,0568 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

it is supported with firefox 3 and above, google chrome and ie9

Samich · Accepted Answer · 2011-09-01 08:06:49Z

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 1, 2011 at 8:06

Samich

30.4k6 gold badges70 silver badges80 bronze badges

1 Comment

Samich Over a year ago

gettings the query string params already was dicussed on stackoveflow

Eskil Mjelva Saatvedt · Accepted Answer · 2011-09-01 08:12:37Z

1

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

answered Sep 1, 2011 at 8:12

Eskil Mjelva Saatvedt

5477 silver badges20 bronze badges

Comments

Sanjeev Singh · Accepted Answer · 2014-08-12 03:28:12Z

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];
}

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related