/    Sign up×
Community /Pin to ProfileBookmark

How to bring the data in the previous page to the next page?

Copy linkTweet thisAlerts:
Sep 16.2021

Hi, I’m working on a restaurant website, I wanted to bring the data (total) in the food menu page to another page called the payment page. I used local storage to store the data, but I can’t bring the data to the payment page, any suggestion is appreciated
Here is the code of food menu page:

“`
<!DOCTYPE html>
<html>
<head>

<title>Giovanni’s Pizza</title>
<meta charset=”utf-8″ />
<title>Assignment</title>
<link rel=”stylesheet” href=”store.css” />

</head>
<body>
<header>
<img src=”pizza2.png” id=”pizza” alt=”Giovanni’s Pizza” width=”1350″ height=”450″ />
</header>
<section class=”container content-section”>
<h2 class=”section-header” style=”font-size: 100px;”>PIZZA</h2>
<div class=”shop-items”>
<div class=”shop-item”>
<span class=”shop-item-title”>Veli Cheesy</span>
<p class=”product-description”>Fresh tomatoes, <br>fresh mozzarella, fresh basil</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Four Chessy God</span>
<p class=”product-description”>Four cheese (mozzarella, <br>parmesan, pecorino, jarlsberg)</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Hawaiian Chicken</span>
<p class=”product-description”>Tomato sauce with chicken meat, <br>pineapple and mozzarella cheese</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Aloha Chicken</span>
<p class=”product-description”>Thousand island sauce, chicken meat, <br>pineapple and mozzarella cheese</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Beef Pepperoni</span>
<p class=”product-description”>Tomato sauce, beef pepperoni,<br> mozzarella cheese</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Chicken Pepperoni</span>
<p class=”product-description”>Tomato sauce, chicken pepperoni, <br>mozzarella cheese</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>BBQ Chicken</span>
<p class=”product-description”>BBQ sauce, chicken meat, <br>mushrooms, onions, mozzarella cheese</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Deluxe Cheese</span>
<p class=”product-description”>Tomato sauce and <br>mozzarella cheese</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Island Tuna</span>
<p class=”product-description”>Thousand island sauce, tuna, <br>onions, mozzarella cheese</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Pineapple Lover</span>
<p class=”product-description”>Fresh tomatoes, mozzarella, <br>fresh pineapple, bacon, fresh basil</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Sambal Vegie</span>
<p class=”product-description”>Fresh mushrooms, green peppers, <br>onions, tomatoes, sambal sauce</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Smoky Beef and Chick</span>
<p class=”product-description”>Onion, green peppers, ground beef,<br> chicken sausage, BBQ sauce</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Vegie Quattro</span>
<p class=”product-description”>Spinach, tomato, olives, <br>pineapples, green peppers</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Flaming Tuna</span>
<p class=”product-description”>Tuna, onions, <br>chillies</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Vegie Galore</span>
<p class=”product-description”>Fresh onions, green peppers, <br>tomatoes, mushrooms</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Simply Cheese</span>
<p class=”product-description”>Mozzarella, parmesan cheese, <br>oregano</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM30.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Meatzilla</span>
<p class=”product-description”>Fresh tomatoes, mozzarella, <br>hot pepperoni, hot sausage, beef, chicken</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM34.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Seafood King</span>
<p class=”product-description”>Spicy sweet sour sauce,<br> tuna, crabsticks, cheese</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM34.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Triple Chicken</span>
<p class=”product-description”>Thousand island sauce, chicken meat, <br>chicken rolls, chicken salami, mushrooms, <br>onions, mozzarella cheese</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM34.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Hawaiian Supreme</span>
<p class=”product-description”>Tomato sauce, chicken meat, <br>chicken loaf, pineapples, mozzarella cheese</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM34.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Chicken Supreme</span>
<p class=”product-description”>Tomato sauce, chicken meat, <br>chicken salami, chicken loaf, mushrooms, <br>capsicums, onions, tomato, mozzarella cheese</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM34.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Island Supreme</span>
<p class=”product-description”>Thousand island sauce, crabsticks, <br>tuna, pineapple, <br>onions, mozzarella cheese</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM34.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Sambal Burn</span>
<p class=”product-description”>Prawns, chicken, pineapples, <br>green peppers, sambal sauce</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM34.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Prawn Sensation</span>
<p class=”product-description”>Prawns, spinach, <br>tomato, onions</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM34.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>
<div class=”shop-item”>
<span class=”shop-item-title”>Spicy Sausage</span>
<p class=”product-description”>Sausage, chillies, <br>pineapples</p>
<div class=”shop-item-details”>
<span class=”shop-item-price”>RM34.99</span>
<button class=”btn btn-primary shop-item-button” type=”button”>ADD TO CART</button>
</div>
</div>

</div>
</section>

<section class=”container content-section”>
<div class=”cart-end”>
<h2 class=”section-header”>CART</h2>
<div class=”cart-row”>
<span class=”cart-item cart-header cart-column”>ITEM</span>
<span class=”cart-price cart-header cart-column”>PRICE</span>
<span class=”cart-quantity cart-header cart-column”>QUANTITY</span>
</div>
<div class=”cart-items”>
</div>
<div class=”cart-total”>
<strong class=”cart-total-title”>Total</strong>
<span class=”cart-total-price” style=”font-size:40px”>RM0</span>
</div>
<button class=”btn btn-primary btn-purchase” type=”button” onclick=”document.location=’payment.html'”>PURCHASE</button>
</div>

</section>
<script>
if (document.readyState == ‘loading’) {
document.addEventListener(‘DOMContentLoaded’, ready);
} else {
ready();
}

function ready() {
var removeCartItemButtons = document.getElementsByClassName(‘btn-danger’);
for (var i = 0; i < removeCartItemButtons.length; i++) {
var button = removeCartItemButtons[i];
button.addEventListener(‘click’, removeCartItem);
}

var quantityInputs = document.getElementsByClassName(‘cart-quantity-input’);
for (var i = 0; i < quantityInputs.length; i++) {
var input = quantityInputs[i];
input.addEventListener(‘change’, quantityChanged);
}

var addToCartButtons = document.getElementsByClassName(‘shop-item-button’);
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i];
button.addEventListener(‘click’, addToCartClicked);
}

document.getElementsByClassName(‘btn-purchase’)[0].addEventListener(‘click’, purchaseClicked);
}

function purchaseClicked() {
alert(‘Proceeding to checkout…..’);
var cartItems = document.getElementsByClassName(‘cart-items’)[0];
while (cartItems.hasChildNodes()) {
cartItems.removeChild(cartItems.firstChild);
}
updateCartTotal();
}

function removeCartItem(event) {
var buttonClicked = event.target;
buttonClicked.parentElement.parentElement.remove();
updateCartTotal();
}

function quantityChanged(event) {
var input = event.target;
if (isNaN(input.value) || input.value <= 0) {
input.value = 1;
}
updateCartTotal();
}

function addToCartClicked(event) {
var button = event.target;
var shopItem = button.parentElement.parentElement;
var title = shopItem.getElementsByClassName(‘shop-item-title’)[0].innerText;
var price = shopItem.getElementsByClassName(‘shop-item-price’)[0].innerText;
addItemToCart(title, price);
updateCartTotal();
}

function addItemToCart(title, price) {
var cartRow = document.createElement(‘div’);
cartRow.classList.add(‘cart-row’);
var cartItems = document.getElementsByClassName(‘cart-items’)[0];
var cartItemNames = cartItems.getElementsByClassName(‘cart-item-title’);
for (var i = 0; i < cartItemNames.length; i++) {
if (cartItemNames[i].innerText == title) {
alert(‘This item is already added to the cart’);
return;
}
}
var cartRowContents = `
<div class=”cart-item cart-column”>
<span class=”cart-item-title”>${title}</span>
</div>
<span class=”cart-price cart-column”>${price}</span>
<div class=”cart-quantity cart-column”>
<input class=”cart-quantity-input” type=”number” value=”1″>
<button class=”btn btn-danger” type=”button”>REMOVE</button>
</div>`
cartRow.innerHTML = cartRowContents;
cartItems.append(cartRow);
cartRow.getElementsByClassName(‘btn-danger’)[0].addEventListener(‘click’, removeCartItem);
cartRow.getElementsByClassName(‘cart-quantity-input’)[0].addEventListener(‘change’, quantityChanged);
}

function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName(‘cart-items’)[0];
var cartRows = cartItemContainer.getElementsByClassName(‘cart-row’);
var total = 0;

for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i];
var priceElement = cartRow.getElementsByClassName(‘cart-price’)[0];
var quantityElement = cartRow.getElementsByClassName(‘cart-quantity-input’)[0];
var price = parseFloat(priceElement.innerText.replace(‘RM’, ”));
var quantity = quantityElement.value;
total = total + (price * quantity);
}

if (typeof(Storage) !== “undefined”) {
// Store
localStorage.setItem(“cart-total-price”, total);
}

total = Math.round(total * 100) / 100;
document.getElementsByClassName(‘cart-total-price’)[0].innerText = ‘RM’ + total;

}
</script>
</body>
</html>
“`

Here is the code for the payment page:

“`
<!DOCTYPE html>

<html>
<head>
<title>Giovanni’s Pizza Payment</title>
<meta charset=”utf-8″>
<title>Payment</title>
<link href=”payment.css” rel=”stylesheet” />
</head>

<body>
<header>
<img src=”logo.jpg” id=”logo” alt=”Giovanni’s Pizza” style=”width:100%”/>
</header>
<section class=”section-container”>
<h2 class=”section-header” style=”font-size:100px”>PAYMENT</h2>
<div class=”row”>
<div class=”col-75″>
<div class=”container”>
<form action=”/action_page.php”>

<div class=”row”>
<div class=”col-50″>
<div class=”cart-total”>
<strong style=”font-family:raleway;font-size:40px;text-align:left;”>Total:</strong>
<span class=”cart-total-price” style=”font-size:40px;text-align:right”>RM0</span>
</div>
<h1 style=”text-align:center”>Billing Address</h1>
<label for=”fname”><i class=”fa fa-user”></i> Full Name</label>
<input type=”text” id=”fname” name=”firstname” placeholder=”John Tan”>
<label for=”email”><i class=”fa fa-envelope”></i> Email</label>
<input type=”text” id=”email” name=”email” placeholder=”[email protected]”>
<label for=”phonew”><i class=”fa fa-envelope”></i>Phone Number</label>
<input type=”text” id=”phone” name=”phone” placeholder=”012-3456789″ />
<label for=”adr”><i class=”fa fa-address-card-o”></i> Address</label>
<input type=”text” id=”adr” name=”address” placeholder=”3/10,Jalan Setia Tropika”>
<label for=”city”><i class=”fa fa-institution”></i> City</label>
<input type=”text” id=”city” name=”city” placeholder=”Johor Bahru”>
<label for=”state”>State</label>
<input type=”text” id=”state” name=”state” placeholder=”Johor”>
<label for=”zip”>Zip</label>
<input type=”text” id=”zip” name=”zip” placeholder=”81200″>
<h1 style=”text-align:center”>Top Up Offline Via ATM/Bank</h1>
<h3 style=”text-align:left”>Bank Account</h3>
<h4 style=”border-style: outset; border-color: rgb(144,22,24);”>
Company Name: Giovanni’s Pizza<br />
Bank Name:Public Bank<br />
Account No.:5-0126434-17<br />
</h4>
<h4 style=”border-style: outset; border-color: rgb(144,22,24); “>
Company Name: Giovanni’s Pizza<br />
Bank Name:Agro Bank<br />
Account No.:2-00-6331-00015126-1<br />
</h4>
<h4 style=”border-style: outset; border-color: rgb(144,22,24);”>
Company Name: Giovanni’s Pizza<br />
Bank Name:CIMB Bank<br />
Account No.:5641-2974-5613-55<br />
</h4>
<h4 style=”border-style: outset; border-color: rgb(144,22,24);”>
Company Name: Giovanni’s Pizza<br />
Bank Name:Maybank<br />
Account No.:5140-1999-1854<br />
</h4>

<div class=”bank”>
<p>
<a href=”https://www2.pbebank.com/myIBK/apppbb/servlet/BxxxServlet?RDOName=BxxxAuth&MethodName=login”>
<img border=”0″ alt=”publicbank” src=”pbb.jpg” style=”float:left;width:150px;height:130px”>
</a>
<a href=”https://www.agronet.com.my/rib/common/Login.do”>
<img border=”0″ alt=”agrobank” src=”agrobank.jpg” style=”float:left;width:150px;height:130px”>
</a>
<a href=”https://www.cimbclicks.com.my/clicks/#/”>
<img border=”0″ alt=”cimbbank” src=”cimbbank.jpg” style=”float:left;width:150px;height:130px”>
</a>
<a href=”https://www.maybank2u.com.my/home/m2u/common/login.do”>
<img border=”0″ alt=”maybank” src=”maybank.jpg” style=”float:left;width:150px;height:130px”>
</a>
</p>
</div>

<div>
<h3>

<label for=”ssPicPaymentBank” style=”float:left”>SCRIPT OF PAYMENT:</label>
<input type=”file” name=”paymentImage” accept=”image/” required />

</h3>
</div>
</div>

</div>
<div>
<div class=”col-50″>

</div>
</div>
<label class=”section-header” style=”font-size:1.2em;color:black;”>
<input type=”checkbox” checked=”checked” name=”sameadr”> Delivery address same as billing
</label>

<a href=”invoice.html” class=”btn”>CONTINUE</a>

</form>

</div>
<div class=”card-footer”>
<div class=”footer-copyright”>&copy;2021 Copyright:<a href=”#”>Giovanni’s Pizza</a></div>
</div>
</div>
<script>
var total=localStorage.getItem(“cart-total-price”);

if (typeof(Storage) !== “undefined”) {
// Retrieve
document.getElementsByClassName(‘cart-total-price’).innerHTML = localStorage.getItem(“cart-total-price”, total);
} else {
document.getElementsByClassName(‘cart-total-price’).innerHTML = “Browser does not support Web Storage.”;
}

</script>

</div>
</section>
</body>
</html>
“`

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@sibertSep 16.2021 — There are several ways. One could be "localStorage". Store the sum on one page and pick up it on the next page.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Copy linkTweet thisAlerts:
@SempervivumSep 16.2021 — BTW: Single backticks (probably created by the button `&lt;/&gt;</C>) won't work reliably when posting code. You better use code tags: <C>your code here` or triple backticks. I edited your posting accordingly.
×

Success!

Help @limwn spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...