I’m painfully close here – I’m getting a TypeError when the form is submitted and no checkboxes are selected in the HTML file – the error occurs when pizzaOptions.length is being read (line 37 of the js file) because I’m assuming it’s trying to read something that’s undefined?
How do I work around this. Here is my TypeError:
var express = require('express');
var bodyParse = require('body-parser');
var app = express();
app.use(express.static('public_html'));
app.use(bodyParse.urlencoded({
extended: false
}));
function addMinutes(date, minutes) {
return new Date(date.getTime() + minutes * 60000);
}
app.post('/order', function(req, res) {
var days, months;
days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
let firstname = req.body.firstname;
let surname = req.body.surname;
let timeNow = new Date();
let address = req.body.address;
let city = req.body.city;
let postCode = req.body.postcode;
let state = req.body.state;
let email = req.body.email;
let phoneNumber = req.body.mobile;
let pizzaType = req.body.pizzaType;
let numberOfPizzas = req.body.numBoxes;
let pizzaSize = req.body.pizzaSize;
let pizzaOptions = req.body.pizzaOptions;
let orderDate = new Date();
let promoCode = req.body.promoCode;
let deliveryTime = addMinutes(orderDate, 45).toLocaleTimeString();
if (typeof pizzaOptions === "undefined") {
pizzaOptions
}
let totalPizzaOptions = 0.5 * pizzaOptions.length;
if (totalPizzaOptions > 2) {
totalPizzaOptions = 0.5;
}
// PIZZA COSTS
let cheese = 12.55;
let veggie = 12.75;
let marinara = 15.55;
let supreme = 16.25;
let tropical = 11.75;
let veggiesupreme = 13.75;
//SIZE COSTS
let Medium = 1.50;
let Large = 2;
let XLarge = 3.50;
//TOTALS AND DELIVERY
let totalCost = 0;
let finalAmount = 0;
let discount = 0;
let discountAmount = 0;
let deliveryCost = 5;
switch (pizzaType) {
case 'Cheese Pizza':
totalCost = totalCost + cheese;
break;
case 'Veggie Pizza':
totalCost = totalCost + veggie;
break;
case 'Marinara Pizza':
totalCost = totalCost + marinara;
break;
case 'Super Supreme':
totalCost = totalCost + supreme;
break;
case 'Tropical Pizza':
totalCost = totalCost + tropical;
break;
case 'Veggie Supreme':
totalCost = totalCost + veggiesupreme;
}
switch (pizzaSize) {
case 'Small':
totalCost = totalCost + 0;
break;
case 'Medium':
totalCost = totalCost + Medium;
break;
case 'Large':
totalCost = totalCost + Large;
break;
case 'Extra Large':
totalCost = totalCost + XLarge;
}
switch (promoCode) {
case "7342418":
discount = "Dinner-4-All (10%)";
discountAmount = 0.1;
break;
case "8403979":
discount = "Winter-Special (25%)";
discountAmount = 0.25;
break;
case "2504647":
discount = "Midweek-Deal (50%)";
discountAmount = 0.5;
break;
case "8406800":
discount = "Special Gift (75%)";
discountAmount = 0.75;
break;
default:
discount = "No discount applied";
discountAmount = 0;
}
totalCost = totalCost * numberOfPizzas;
discountAmount = (totalCost * discountAmount);
finalAmount = (totalCost - discountAmount) + deliveryCost + totalPizzaOptions;
finalAmount = finalAmount.toFixed(2);
res.write('<html><head>');
res.write("<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css' integrity='sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk' crossorigin='anonymous'></head>");
res.write('<body> <div class="container">');
res.write("<h1 class='text-left'>ORDER CONFIRMATION</h1>");
res.write(`<p>Thank you for your order received on: <strong>${timeNow}</strong></p>`);
res.write("<h2 class='text-left'>Pizza Details</h2>");
res.write(`<p>${numberOfPizzas} x ${pizzaSize} ${pizzaType} [Options: ${pizzaOptions}]</p>`);
res.write("<h2 class='text-left'>Customer Details</h2>");
res.write(`<p>Customer: ${firstname} ${surname}</p>`);
res.write(`<p>Address: ${address}, ${city}, ${state}, ${postCode}</p>`);
res.write(`<p>Contact mobile: ${phoneNumber}</p>`);
res.write(`<p>Contact email: ${email}</p>`);
res.write("<h2 class='text-left'>Pizza Cost</h2>");
res.write('<div class="container">');
res.write('<div class="row">');
res.write('<div class="col">');
res.write(`<p>${numberOfPizzas} x ${pizzaSize} ${pizzaType} [Options: ${pizzaOptions}]</p>`);
res.write('</div>');
res.write('<div class="col">');
res.write(`$ ${totalCost}`);
res.write('</div>');
res.write('</div>');
res.write('<div class="row">');
res.write('<div class="col">');
res.write(`Optional Extras @ $0.50 each`);
res.write('</div>');
res.write('<div class="col">');
res.write(`$ ${totalPizzaOptions}`);
res.write('</div>');
res.write('</div>');
res.write('<div class="row">');
res.write('<div class="col">');
res.write('Delivery');
res.write('</div>');
res.write('<div class="col">');
res.write(`$ ${deliveryCost}.00`);
res.write('</div>');
res.write('</div>');
res.write('<div class="row">');
res.write('<div class="col">');
res.write(`Discount - ${discount}`);
res.write('</div>');
res.write('<div class="col">');
res.write(`$ - ${discountAmount}`);
res.write('</div>');
res.write('</div>');
res.write('<div class="row">');
res.write('<div class="col">');
res.write('<strong>Total');
res.write('</div>');
res.write('<div class="col">');
res.write(`$ ${finalAmount}</strong>`);
res.write('</div>');
res.write('</div>');
res.write('</div>');
res.write("<h2 class='text-left'>Estimated Delivery Time</h2>");
res.write(`<p>Delivery Expected by: <strong>${deliveryTime}</strong> -- or the pizza is free!</p>`);
src = "https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin = "anonymous"
src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous"
src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity = "sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin = "anonymous"
res.write('</body></html>');
res.send();
});
app.listen(3000, function() {
console.log("Web server running at: http://localhost:3000");
console.log("Type Ctrl+C to shut down the web server");
});
<!doctype html>
<html lang="en">
<head>
<title>Task 9.3C</title>
<meta charset="utf-8">
<meta name="author" content="SIT774">
<meta name="description" content="Express Sqlite3 Demo">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Latest compiled and minified CSS -->
<!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<script>
function myFunction() {
var pizzaOptions = document.forms[0];
var txt = 0;
var i;
for (i = 0; i < pizzaOptions.length; i++) {
if (pizzaOptions[i].checked) {
txt = txt + pizzaOptions[i].value + " ";
}
}
}
</script>
<body>
<div class="container">
<h1>dKin Pizza Order Form</h1>
<p>Thank you for choosing dKin Pizza! Please fill in the customer & pizza order details below.</p>
<form action="/order" method="post" name="form" id="form">
<h5 class="bg-primary text-white rounded-sm p-1">Customer Details</h5>
<div class="form-row">
<div class="col-sm-6 mb-1">
<label for="firstname"><small>First name</small></label>
<input type="text" class="form-control" name="firstname" id="firstname" placeholder="Mark" required>
</div>
<div class="col-sm-6 mb-1">
<label for="surname"><small>Last name</small></label>
<input type="text" class="form-control" name="surname" id="surname" placeholder="Smith" required>
</div>
</div>
<div class="form-row">
<div class="col mb-1">
<label for="address"><small>Delivery
Address</small></label>
<input type="text" class="form-control" name="address" id="address" placeholder="123 Apple St" required>
</div>
</div>
<div class="form-row">
<div class="col-sm-6 mb-1">
<label for="city"><small>City</small></label>
<input type="text" class="form-control" name="city" id="city" placeholder="Geelong" required>
</div>
<div class="col-sm-3 mb-1">
<label for="state"><small>State</small></label>
<select class="custom-select " name="state" id="state" required>
<option selected disabled value="">Choose...</option>
<option>VIC</option>
<option>NSW</option>
<option>ACT</option>
<option>QLD</option>
<option>SA</option>
<option>TAS</option>
<option>SA</option>
</select>
</div>
<div class="col-sm-3 mb-1">
<label for="postcode"><small>Postcode</small></label>
<input type="text" class="form-control" name="postcode" id="postcode" placeholder="3216" required>
</div>
</div>
<div class="form-row">
<div class="col-sm-6 mb-4">
<label for="email"><small>Email
address</small></label>
<input type="text" class="form-control" name="email" id="email" placeholder="[email protected]" required>
</div>
<div class="col-sm-6 mb-4">
<label for="mobile"><small>Mobile number
</small></label>
<input type="text" class="form-control" name="mobile" id="mobile" placeholder="04xx xxxx" required>
</div>
</div>
<h5 class="bg-primary text-white rounded-sm p-1 mb-3">Pizza Selection
</h5>
<div class="form-group row">
<label class="col-sm-2 col-form-label text-sm-right" for="pizzaType">Select
your pizza:</label>
<div class="col-sm-6 my-auto">
<select class="form-control" name="pizzaType" id="pizzaType" required>
<option selected disabled value="">Please select a pizza type....
</option>
<option value="Cheese Pizza">Cheese Pizza</option>
<option value="Veggie Pizza">Veggie Pizza</option>
<option value="Marinara Pizza">Marinara Pizza</option>
<option value="Super Supreme">Super Supreme</option>
<option value="Tropical Pizza">Tropical Pizza</option>
<option value="Veggie Supreme">Veggie Supreme</option>
</select>
</div>
<label class="col-form-label col-sm-2 text-sm-right" for="numberOfPizzas">Number of pizzas:</label>
<div class="col-sm-2 my-auto">
<input type="number" class="form-control" id="numberOfPizzas" value="1" name="numBoxes" min="1" max="99" required>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-sm-2 text-sm-right" for="pizzaSizeSelection">Select a size:</label>
<div class="col-sm-10 my-auto">
<div class="form-check form-check-inline" id="pizzaSizeSelection">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="pizzaSize" id="inlineRadio1" value="Extra-Large">
<label class="form-check-label" for="inlineRadio1">Extra-Large</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="pizzaSize" id="inlineRadio2" value="Large" checked>
<label class="form-check-label" for="inlineRadio2">Large</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="pizzaSize" id="inlineRadio3" value="Medium">
<label class="form-check-label" for="inlineRadio3">Medium</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="pizzaSize" id="inlineRadio3" value="Small">
<label class="form-check-label" for="inlineRadio3">Small</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-sm-2 text-sm-right" for="pizzaOptions">Special requests:</label>
<div class="col-sm-10 my-auto">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="pizzaOptions" value="Extra Cheese">
<label class="form-check-label" for="pizzaOptions">
Extra Cheese</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="pizzaOptions" value="Roasted Garlic">
<label class="form-check-label" for="pizzaOptions">
Roasted Garlic</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="pizzaOptions" value="Thick Crust">
<label class="form-check-label" for="pizzaOptions">
Thick Crust</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="pizzaOptions" value="No Chilli">
<label class="form-check-label" for="pizzaOptions">
No Chilli</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="promoCode">
Promotional Code:</label>
<input class="form-check-input" type="number" name="promoCode" id="promoCode" placeholder="XXXX">
</div>
</div>
<div class="form-group row ">
<div class="col-sm mx-auto d-flex justify-content-center ">
<button type="submit" class="btn btn-primary" onclick="myFunction()">Submit</button>
</div>
</div>
</form>
</div>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="text/javascript" src="9.3.js"></script>
</body>
</html>