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.

May be this help you. Try to save value in local storage. And In the second page try to load data from localStorage and process it according your need. Or if you have small data, then add it in your new page url and use `window.location` to acess it. Then process it according to your need. — Alok Prakash, Oct 27 '21 at 18:50

score 0 · Accepted Answer · answered Oct 27 '21 at 19:12

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.

Transfer table data between pages with javascript

1 Answers1