Transfer table data between pages with javascript
Question
I've created a form that asks the user to select an option from a dropdown and a quantity from a number input. Using javascript I have calculated a couple of different values and placed them inside a new table. I want to have the user click a submit button which will take the user to a new page that will display the same productCart table of calculated values. How would I transfer the new values back into the table on this new page after clicking the button. I've copied and pasted the tables html into the new page I just don't know how to make the calculated values transfer from page to page.
Heres my html
<!DOCTYPE html>
<html lang="en">
<head>
<title>ABC Games</title>
<meta charset="utf-8" />
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<link href="styles/reset.css" rel="stylesheet" type="text/css" />
<script src="products.js" async></script>
</head>
<header>
<a href="index.html"><img class="topImg" src="images/dice.png" alt="Dice"/></a>
<a href="index.html"><img class="topImg2" src="images/dice.png" alt="Dice"/></a>
<div class="centerText">
<span class="multicolortext">ABC Games</span>
</div>
<nav>
<ul class="topnav1">
<li><a class="topnav2" href="buyProducts.html" >Buy Products</a></li>
<li><a class="topnav2" href="confirmProducts.html" >Confirm Products</a></li>
<li><a class="topnav2" href="playGame.html" >Play Game</a></li>
</ul>
</nav>
</header>
<body>
<section>
<form name="productsCart" id="productsCart" method="post" action="confirmProducts.html">
<div class="row">
<div class="column">
<table id="productSelect">
<tr>
<th id="purchaseDate"><span id="date-time"></span>
<script>
var dt = new Date();
document.getElementById("date-time").innerHTML=dt.toDateString();
</script></th>
</tr>
<tr>
<th>Product Select</th>
<th>Quantity Select</th>
<th>Product Cost</th>
</tr>
<tr>
<td>
<select id="product">
<option value="" selected></option>
<option value="1">A game of thorns</option>
<option value="2">Widgets</option>
<option value="3">Tic-Tac-Toe</option>
<option value="4">Toe-Tac-Tic</option>
<option value="5">Count Up</option>
</select>
</td>
<td>
<input type="number" id="quantity" name="quantity" min="0" max="20">
</td>
<td>
<input type="text" name="cartPrice" id="cartPrice" readonly>
</td>
</tr>
</table>
</div>
<div class="column">
<table id="productCart">
<tr>
<th>Base Price</th>
<th>Total Price</th>
<th>Sales Tax</th>
<th>Final Total</th>
</tr>
<tr>
<td><input type="text" name="basePrice" id="basePrice" class="basePrice date0 sum" readonly></td>
<td><input type="text" name="totalPrice" id="totalPrice" class="totalPrice date0 sum" readonly></td>
<td><input type="text" name="salesTax" id="salesTax" class="salesTax date0 sum" readonly></td>
<td><input type="text" name="finalTotal" id="finalTotal" class="subtotal"readonly></td>
<td></td>
</tr>
</table>
</div>
</div>
</form>
<input id="submitButton" type="submit" value="Submit Purchase">
</section>
</body>
<footer id="footer">
<p class="footerInfo">~ Contact US ~ 000-000-0000 ~ ABC Games ~ </p>
<address>543 Naught Ln | Myrtle Beach | SC 29577</address>
</footer>
</html>
And heres my javascript
window.addEventListener("load", function() {
grabProduct();
buttonClick();
});
function grabProduct(){
var price;
var value;
var totalPrice;
var productCost;
var salesTax;
document.getElementById("product").addEventListener("change" , function() {
value = this.options[this.selectedIndex].value;
if(value == 1) {
price = "54.55";
}
if(value == 2) {
price = "22.95";
}
if(value == 3) {
price = "99.89";
}
if(value == 4) {
price = "1.25";
}
if(value == 5) {
price = "13.57";
}
document.getElementById("quantity").addEventListener("change" , function() {
//puts value of quantity select into value variable
value = document.getElementById("quantity").value;
//Calculate product * amount of product and put into variable
productCost = value * price;
salesTax = productCost * .11;
finalTotal = productCost - salesTax;
document.getElementById("basePrice").value = formatUSCurrency(price);
document.getElementById("cartPrice").value = formatUSCurrency(productCost);
document.getElementById("totalPrice").value = formatUSCurrency(productCost);
document.getElementById("salesTax").value = formatNumber(salesTax);
document.getElementById("finalTotal").value = formatUSCurrency(finalTotal);
});
document.getElementById("basePrice").value = formatUSCurrency(price);
});
}
//Formats to currency
function formatUSCurrency(val) {
return val.toLocaleString('en-US', {style: "currency", currency: "USD"} );
}
//Formats numbers
function formatNumber(val, decimals) {
return val.toLocaleString(undefined, {minimumFractionDigits: decimals,
maximumFractionDigits: decimals});
}
function buttonClick(){
document.getElementById("submitButton").onclick = function() {
location.href = "confirmProducts.html";
};
}
If someone could point me in the correct direction or another answered question like this that would be awesome.
1 answers
solution1
0 2021-10-27 19:12:34
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')
Be aware the local storage can store only string values, so you need to use the JSON.stringify() function to store the products json.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.