I've been working on a form to input values and show the data on a different page after submission. Below is my form:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/checkout.css">
<p id="Header">Checkout page</p>
<div class="row">
<div class="col-75">
<div class="containeer">
{{!-- When fom submitted, transport to here --}}
<form id="form" action="receipt" style="checkout.css">
<div class="row">
<div class="col-50">
<h3>Billing Address</h3>
{{!-- Name --}}
<label for="name"><i class="fa fa-user"></i> Full Name*</label>
<input class="form-control" type="text" placeholder="Example: Chia Kai Jun" id="name" required />
<label for="email"><i class="fa fa-envelope"></i> Email*</label>
<input class="form-control" type="email" id="email" placeholder="Example: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8de7e2e5e3cde8f5ece0fde1e8a3eee2e0">[email protected]</a>" required />
<label for="adr"><i class="fa fa-address-card-o"></i> Address (Street, Block, Unit Number)*</label>
<input class="form-control" type="text" id="adr" name="address" placeholder="Example: Ang Mo Kio Street 69, Blk106P, #07-212" required />
<div class="row">
<div class="col-50">
<label for="zip">Zip*</label>
<input class="form-control"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
{{!-- Javascript code needed here to prevent using text --}}
pattern="\d*" maxlength="6" type="number" id="zip" name="zip" placeholder="Example: 123456" required />
</div>
</div>
</div>
<div class="col-50">
<h3>Payment</h3>
{{!-- Available credit cards to use with image --}}
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
</div>
<label for="cname">Name on Card*</label>
<input class="form-control" type="text" id="cname" name="cardname" required />
<label for="ccnum">Credit card number*</label>
<input class="form-control" type="text" maxlength="19" id="ccnum" name="cardnumber" placeholder="Example: 1111-2222-3333-4444"required />
<div class="row">
<div class="col-50">
<label for="expyear">Exp Month and Year*</label>
<input class="form-control" type="month" id="expyear" name="expyear" required />
</div>
<div class="col-50">
<label for="cvv">CVV*</label>
<input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type="password" id="cvv" name="cvv" pattern="\d*" minlength="3" maxlength="3" required />
</div>
</div>
</div>
</div>
{{!-- Will link to thank you for purchase, but now link to base for testing --}}
<button type="submit" class="btn btn-primary" onclick="submitForm()">Submit</button><span id="hi">* - Must be filled in</span>
</div>
</div>
<div class="col-25">
<div class="container">
<h4>Cart <span class="price" style="color:black"><i class="fa fa-shopping-cart"></i></span></h4>
{{!-- Will be currently empty if nothing and have items if something there --}}
<p id="item">Thinkpad Laptop - $100</p>
<img class="card-img-top p-5" src="/images/laptop.png" id="laptopimage">
<hr>
<p id="price" value="$100">Total: $100 <span class="price" style="color:black"></span></p>
{{!-- Will display nothing if there are no items and will compute total cost if there are items --}}
</div>
</div>
</div>
</form>
<script>
function submitForm(){
let name = document.forms["form"]["name"].value;
let email = document.forms["form"]["email"].value;
let address = document.forms["form"]["address"].value;
let zip = document.forms["form"]["zip"].value;
let test = document.forms["form"]["test"].value;
if (name == "") and (email == "") and (address == "") and (zip == "") and (test == ""){
return false;
}
else if(typeof(localStorage) != "undefined"){
localStorage.name = document.getElementById("name").value;
localStorage.email = document.getElementById("email").value;
localStorage.adr = document.getElementById("adr").value;
localStorage.zip = document.getElementById("zip").value;
localStorage.test = document.getElementById("test").value;
}
document.getElementById("form").submit();
}
</script>
Here's the code to display the input data:
.yeet{
font-size: 25px;
line-height: 200%;
padding: 40px;
}
.intro{
text-align: center;
}
</style>
<div class="intro">
<h1>Thank you for your purchase!</h1>
<h2>Please check that your checkout details are correct</h2>
</div>
<body onload="setData()">
<div class="yeet">
Name: <span id="name"></span><br>
Email: <span id="email"></span><br>
Address: <span id="adr"></span><br>
Zip: <span id="zip"></span><br>
Item: <span id="cvv"></span><br>
</div>
<script>
function setData(){
if(typeof(localStorage) != "undefined"){
document.getElementById("name").innerHTML = localStorage.name;
document.getElementById("email").innerHTML = localStorage.email;
document.getElementById("adr").innerHTML = localStorage.adr;
document.getElementById("zip").innerHTML = localStorage.zip;
document.getElementById("cvv").innerHTML = localStorage.cvv;
}
}
</script>
</body>
After inputting data, I want to display Name, Email, Address, ZIP, and CVV. However, the CVV is showing as undefined while other values are displaying correctly. Unsure of the issue.