Passing JavaScript data values between 2 HTML pages.

Question

1.22/5 (2 votes)

See more:

I have 2 HTML pages and in the 1st HTML page there are 2 JavaScript Variables & I want to pass the values of those 2 to another 2 variables in the 2nd HTML page. I am expecting an answer not using HTML 5.

How can I able to do that?

Thanks & regards,
Chiranthaka

Posted 9-Jul-14 21:44pm

Chiranthaka Sampath

Updated 10-Jul-20 0:51am

Add a Solution

Comments

Peter Leow 10-Jul-14 8:19am

Just added response to your additional query.

5 solutions

Solution 1

Try this..

In example1.html:

a href="example2.html?myVar1=42&myVar2=66" >LINK
/a>

// Adapted from examples on the Querystring homepage.
var qs = new Querystring();
var v1 = qs.get("myVar1");
var v2 = qs.get("myVar2");

Posted 9-Jul-14 22:31pm

Dhrisya P Nair

Updated 9-Jul-14 22:34pm

v2

Comments

Chiranthaka Sampath 10-Jul-14 4:47am

If I click the 'LINK' the values will be passed, is it so?

Solution 4

this may help you :

A Quick Tutorial on JavaScript Variable Passing[^]

JavaScript: Passing data between pages[^]

:) :) :)

Posted 13-Jul-14 23:37pm

HardikPatel.SE

Comments

Chiranthaka Sampath 14-Jul-14 7:09am

Your help is appriciated pal, but this is not I wanted. Because I already done the passing as 'Peter Leow' saying in his solution. Now what I want is get the particular values from the URL i.e. startDate & endDate & pass them into 2 JavaScript Variables. Then how am I supossed to do that?

Solution 5

super simple...

to pass parameter
(page 1)

JavaScript

let urlParams = new URLSearchParams(window.location.search);
window.open('url' + urlParams);

to receive parameter
(page 2)

JavaScript

let myParamVar = urlParams.get('myParam');

(let is basically a better version of var):
then use:

JavaScript

let bod = document.getElementByTagName('body')[0];
bod.onload = function();

function([optional params]) {

    //do something here

}

How'd it work?

Posted 19-Sep-18 13:42pm

Member 13990792

Updated 19-Sep-18 13:44pm

v2

Comments

Richard Deeming 20-Sep-18 9:30am

The URLSearchParams object was not supported in any major browser at the time this question was posted.

Chrome and Firefox added support in 2016; Safari in 2017; and Edge in 2018. Internet Explorer still doesn't support the API.

Aside from that, using the querystring was already suggested in the accepted solution.

Solution 7

<html>
<head>
<title>Solution</title>
</head>
<body>
<form action = "" name = "myForm" onsubmit = "aa();">
Name ::
<input type="text"name="fname"><br>
Email::
<input type="text"name="email">
<input type = "submit" value = "Submit" />
</form>
<script>

function aa()
{
var value1=document.myForm.fname.value;
var value2=document.myForm.email.value;
var queryString = "?para1=" + value1 + "¶2=" + value2;
window.open("page2.html" + queryString);
}
</script> 
</body>
</html>

Page 2

<html>
<head>
<title>value</title>
</head>
<body>
<h4>From page1.html.</h4>
<script>
 
var queryString = decodeURIComponent(window.location.search);
queryString = queryString.substring(1);
var queries = queryString.split("&");
for (var i = 0; i < queries.length; i++)
{
  document.write(queries[i] + "<br>");
}
 
</script> 
</body>
</html>

Posted 10-Jul-20 0:51am

Member 14886040

Updated 10-Jul-20 1:57am

v2

Comments

CHill60 10-Jul-20 6:57am

An uncommented code dump is not a solution!

Member 14886040 10-Jul-20 8:01am

Basic code does not required comments

CHill60 10-Jul-20 8:33am

Ok. A code dump is not a solution. Explain why your solution is better than / different from the other solutions that were posted years ago.
By the way, even "basic" code does require commenting, especially if you are trying to explain to someone how to do something

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Accepted Answer · 2014-07-09T23:36:00

Solution 2

See example, 100% javascript:
page1.html

<!DOCTYPE html>
<html>
<head>
<title>Acknowledgement</title>
</head>
<body>
<script>
var value1="value1";
var value2="value2";
var queryString = "?para1=" + value1 + "&para2=" + value2;
window.location.href = "page2.html" + queryString;
</script> 
</body>
</html>

page2.html

<!DOCTYPE html>
<html>
<head>
<title>Acknowledgement</title>
</head>
<body>
<h4>These are the data from page1.html.</h4>
<script>
 
var queryString = decodeURIComponent(window.location.search);
queryString = queryString.substring(1);
var queries = queryString.split("&");
for (var i = 0; i < queries.length; i++)
{
  document.write(queries[i] + "<br>");
}
 
</script> 
</body>
</html>

launch page1.html on browser and what do you see?

Posted 9-Jul-14 23:36pm

Peter Leow

Updated 9-Jul-14 23:37pm

v2

Comments

Chiranthaka Sampath 10-Jul-14 6:55am

It worked pal & I modified the source code as at the below to get values from a form but the data didn't pass as expected. Instead of that only the form was resetted. The source code is at the below. So could you look at that again?

<body>

<script>
function passing(){
var firstDate=document.getElementsByName("firstDate");
var secondDate=document.getElementsByName("secondDate");
var queryString = "?para1=" + firstDate + "¶2=" + secondDate;
window.location.href = "SecondPage.html" + queryString;
}
</script>

<form önsubmit="passing()" >
<input type="text" id="firstDate" name="firstDate" /><br />
<input type="text" id="secondDate" name="secondDate" /><br />
<input type="submit" value="submit" />
</form>

</body>

Thanks.

Peter Leow 10-Jul-14 8:07am

Why didn't you mention that you use form in the first place, then I would have directed you to my winning article: http://www.codeproject.com/Articles/761123/Beginners-Guide-to-HTML-CSS-Formidable-Forms-with which has covered this.
Anyway, I suggest:
1. remove all the javascript from the page1.html
2. modify the form tag like this
<form action="page2.html" method="get">
Any more doubts, read my article.

Chiranthaka Sampath 11-Jul-14 0:13am

Now I want to store these 2 values into 2 JavaScript variable called sDate and eDate. Then how I should do that? I've managed to edit the statement at the second page as at the below.

var queryString = decodeURIComponent(window.location.search);
document.write(queryString);

But it gave me an output as at the below.

?firstDate=Today+is&secondDate=11/07/2014

Now I want to pass that 2 values to sDate & eDate. So what should I change in the SecondPage.html page?

Chiranthaka Sampath 14-Jul-14 6:32am

Now the 2 values firstDate & secondDate are in the pages' URL as 'SecondPage.html?firstDate=01%2F01%2F2016&secondDate=05%2F05%2F2016'. Now I want to add the firstDate & secondDate values into two separate variables in the SecondPage.html. These variables are JavaScript variables. Then pal how can I do that?

YAGA MOUNICA 25-Apr-21 6:21am

gjgh

Chiranthaka Sampath 11-Jul-14 1:41am

Now I want to store these 2 values into 2 JavaScript variable called sDate and eDate. Then how I should do that? I've managed to edit the statement at the second page as at the below.

var queryString = decodeURIComponent(window.location.search);
document.write(queryString);

But it gave me an output as at the below.

?firstDate=Today+is&secondDate=11/07/2014

Now I want to pass that 2 values to sDate & eDate. So what should I change in the SecondPage.html page?

Passing JavaScript data values between 2 HTML pages.

5 solutions

Solution 2

Solution 1

Solution 4

Solution 5

Solution 7

Add your solution here

Preview 0

Passing JavaScript data values between 2 HTML pages.

5 solutions

Solution 2

Solution 1

Solution 4

Solution 5

Solution 7

Add your solution here

Preview 0

Existing Members

...or Join us