Share data between HTML pages
why don't you store your values in HTML5 storage objects such as sessionStorage
or localStorage
, visit HTML5 Storage Doc to get more details. Using this you can store intermediate values temporarily/permanently locally and then access your values later.
To store values for a session:
sessionStorage.setItem('label', 'value')
sessionStorage.getItem('label')
or more permanently:
localStorage.setItem('label', 'value')
localStorage.getItem('label')
So you can store (temporarily) form data between multiple pages using HTML5 storage objects which you can even retain after reload..
Passing data among different HTML pages
You can do this with use of localstorage
First Page: (first.html)
localStorage.setItem("square_first", "A");
Second Page: (second.html)
localStorage.getItem("square_first");
Transfer table data between pages with javascript
You can use the localStorage.localStorage
is kind of map object in your browser which you can store any data you want in it using the setItem
and getItem
methods.
Try to save your table data into a json object and store it the local storage, then in the confirmProducts.html page to can pull it out.
Something like this:
// mainPage.html
const products = {
// ... the table data
}
localStorage.setItem('products', JSON.stringify(products));
// confirmProducts.html
const products = localStorage.getItem('products')
Pass data between two HTML pages (Google Apps Script)
Use localstorage
a.html
localStorage.setItem('id',1)
b.html
var id = localStorage.getItem('id')
the other way is to put it in a js file and import it in both html
Passing a variable between HTML pages using JavaScript
The code below works for me, which isn't much different than yours. Maybe it's how your importing your javascript?
index.html
<html>
<head>
<title>Example</title>
<script type="text/javascript" src='./index.js'></script>
</head>
<body>
<input type = "text" id = "name">
<button onclick = "sv(); window.location.href = 'secondPage.html'">Submit now</button>
</body>
</html>
index.js
function sv() {
sessionStorage.setItem("theirname", document.getElementById("name").value);
}
secondPage.html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p id="output"></p>
</body>
<script type="text/javascript" src='./secondPage.js'></script>
<!-- The script must come after and not in the head, or else document.getElementById will be null -->
</html>
secondPage.js
document.getElementById("output").innerHTML = sessionStorage.getItem("theirname");
Related Topics
Determine Timezone from Latitude/Longitude Without Using Web Services Like Geonames.Org
Return HTML Content as a String, Given Url. JavaScript Function
Addeventlistener("Click",...) Firing Immediately
How to Submit a Form With JavaScript by Clicking a Link
Send Formdata and String Data Together Through Jquery Ajax
Html Text Input Allow Only Numeric Input
Creating a Textarea With Auto-Resize
Set the Value of an Input Field
How to Move an Element into Another Element
What Is the Htmlspecialchars Equivalent in JavaScript
How to Check If a Specific Pixel of an Image Is Transparent
JavaScript: How to Find Out If the User Browser Is Chrome
Cross-Browser Multi-Line Text Overflow With Ellipsis Appended Within a Fixed Width and Height
How to Impose Maxlength on Textarea in HTML Using JavaScript
Passing Variable Through JavaScript from One HTML Page to Another Page
Persisting the Changes of Range Objects After Selection in Html