Passing javascript variable from one html page to another page

Question

Hello All i started working on html recently,but iam struck in this situation where i want to send a value from one html page to the next html page just like,how websites shows our name after sign up success.Here i have written two html pages with,

pageOne.html

<!DOCTYPE html>
<head>
<title>
Home
</title>
<meta charset="UTF-8">
</head>
<style>
.myP{
color: lightgreen;}
</style>
<body>
<p id="p1" class="myP" onclick="myFun()">DataSend</p>
</body>
<script>
function myFun(){
document.getElementById("p1").style.color = "blue";
var textprevi=document.getElementById("p1").innerHTML;
localStorage.setItem("message", textprevi); 
window.open("pageTwo.html","_self");
}
</script>
</html>

and my second

pageTwo.html

<!DOCTYPE html>
<html>
<body onload="fun">
<input type="text" id="tBox">
</body>
<script>
function fun()
{
document.getElementById("tBox").innerHTML = localStorage.getItem("message");
}

</script>
</html>

But when i tried the above solution,the element with id = "tBox" was empty but i wanted it to be filled with value = "DataSend" which is from pageOne.html. Please help me with the promblem. Thanks in advance.

brk · Accepted Answer · 2016-07-18 18:36:03Z

1

The problem is with this line

document.getElementById("tBox").innerHTML = localStorage.getItem("message");

Here tBox is a an input element. So you have to use value instead of innerHTML

document.getElementById("tBox").value= localStorage.getItem("message");

answered Jul 18, 2016 at 18:36

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

Comments

Arun Ghosh · Accepted Answer · 2016-07-18 18:25:26Z

0

You can do it using querystring parameters In page one:

function myFun(){
  document.getElementById("p1").style.color = "blue";
  var textprevi=document.getElementById("p1").innerHTML;
  window.open("pageTwo.html?data=" + textprevi,"_self");
}

In page 2

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 data = getParameterByName('data');

answered Jul 18, 2016 at 18:25

Arun Ghosh

7,7741 gold badge28 silver badges38 bronze badges

Comments

bhanu09 · Accepted Answer · 2016-07-18 18:38:49Z

0

You made two mistakes in pageTwo.html.

<!DOCTYPE html>
<html>
<body onload="fun()"><!-- You didn't invoke the function here -->
<input type="text" id="tBox">
</body>
<script>
function fun()
{
document.getElementById("tBox").value = localStorage.getItem("message"); // You need to set the value for input fields, not innerHTML.
}

</script>
</html>

These changes should make your code work.

answered Jul 18, 2016 at 18:38

bhanu09

614 bronze badges

Collectives™ on Stack Overflow

Passing javascript variable from one html page to another page

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related