I’m working on HW for a web dev class and I’m completely stumped. Anyone know what my issue is?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flower/Ornament Order Exercise</title>
<style>
* { box-sizing: border-box; font-family: Georgia, sans-serif; }
header { border: 2px solid black; padding: 20px; background-color: #FF6A6A; height: 150px; border: 2px solid purple; border-radius: 15px; }
h1, h3 { color: #000000; text-align: center; margin-top: 5px; }
fieldset { background-color: #FF6A6A; border: 2px solid #000000; border-radius: 15px; margin-left: auto; margin-right: auto; }
.row { display: inline-block; margin-left: auto; margin-right: auto; width: 100%; }
.left { float: left; width: 25%; padding: 5px; height: 200px; margin: 5px; border: 4px solid black; }
.right { float: right; width: 70%; height: 200px; margin: 5px; color: #000000; margin-left: auto; margin-right: auto; }
.one { width: 50%; float: left; color: #000000; }
.two { width: 50%; float: right; color: #000000; margin-right: auto; }
.major { width: 80%; background-image: url('Roses.jpg'); margin-left: auto; margin-right: auto; border-radius: 15px; padding: 5px 5px;
border: 2px solid #6AFFFF; background-size: cover; }
.minor { color: #000000; }
.middle { border-bottom: 3px solid #000000; }
legend { background-color: #6AFF8C; color: #000000; border: 3px solid black; border-radius: 15px; font-size: 20px; font-weight: bold; }
a { color: #FFFFFF; }
footer { text-align: center; color: #FFFFFF; }
</style>
<script>
function validateEntries() {
var first;
var last;
var email;
var phone;
first = document.getElementById("firstName").value;
last = document.getElementById("lastName").value;
email = document.getElementById("email").value;
phone = document.getElementById("phone").value;
if (first == "" && last == "" && email == "" && phone == "") {
alert("You Didn't Enter Any Contact Info!");
} else if (first == "") {
alert == "Please Enter your First Name!");
} else if (last == "") {
alert("Please Enter your Last Name!");
} else if (phone == "" and email == "") {
alert("Please Enter a Means of Contacting You!");
} else if (phone.length != 10 && phone == "") {
alert("Please Enter a Valid Phone Number in ########## Format (No Dashes!)");
} else if (!email == "" && !email.includes("@") {
alert("Please Enter a Valid Email Address!");
} else {
window.open(*not showing web address*);
}
}
function CalcOrderTotal() {
var poinsettiaTotal;
var mistletoeTotal;
var customTotal;
var poinsettiaCost;
var mistletoeCost;
var customCost;
var totalCost;
poinsettiaTotal = document.getElementById("poinsettiaAmount").value;
mistletoeTotal = document.getElementById("mistletoeAmount").value;
customTotal = document.getElementById("customAmount").value;
poinsettiaCost = Number(poinsettiaTotal) * 12.98;
mistletoeCost = Number(mistletoeTotal) * 4.98;
customCost = Number(customTotal) * 39.75;
totalCost = poinsettiaCost + mistletoeCost + customCost;
if (poinsettiaTotal > 20 || mistletoeTotal > 20 || customTotal > 20) {
alert("Quantity Over 20 - Please Call for Discounted Rate!");
} else {
alert("Your Purchase will be $" + totalCost +"<br>Thank you for your Order!");
}
poinsettiaAmount.focus();
}
</script>
</head>
<body onload="poinsettiaAmount.focus();">
<div class="major">
<header>
<h1>I Can't Think of a Clever Name for this Flower Store</h1>
<h3>----<br>
Open Monday through Thursday from 9 AM until 8 PM, closed Friday through Sunday</h3>
</header>
<div>
<form name="orderForm" id="orderForm" onsubmit="return CalcOrderTotal()">
<fieldset>
<legend>Flower Order Form</legend>
<div class="middle">
<div class = "row">
<div class="left" style="background-image: url('Poinsettia.jpg'); background-size: cover;"></div>
<div class="right">
<h2>Poinsettia</h2>
<label>The bright red leaves of the Poinsettia will fill your home with color!</label><br>
<label>Number of Plants Ordered: </label>
<input type="text" id="poinsettiaAmount" name="poinsettiaAmount">
<label> $12.98 each</label><br>
<label>For orders OVER 20, CALL to receive Quantity Discount and Shipping Prices</label></div><br>
</div>
<div class="row">
<div class="left" style="background-image: url('Mistletoe.jpg'); background-size: cover;"></div>
<div class="right">
<h2>Mistletoe</h2>
<label>Start the season with a kiss under the mistletoe!</label><br>
<label>Number of Plants Ordered: </label>
<input type="text" id="mistletoeAmount" name="mistletoeAmount">
<label> $4.98 each</label><br>
<label>For orders OVER 20, CALL to receive Quantity Discount and Shipping Prices</label></div><br>
</div>
<div class="row">
<div class="left" style="background-image: url('Custom.jpg'); background-size: 100%; height: 140px; "></div>
<div class="right">
<h2>Custom Floral Arrangement</h2>
<label>Let our talented florists create a beautiful flower arranagement to decorate your holiday table!</label><br>
<label>Number of Plants Ordered: </label>
<input type="text" id="customAmount" name="customAmount">
<label> $39.75 each</label><br>
<label>For orders OVER 20, CALL to receive Quantity Discount and Shipping Prices</label></div><br>
</div><br><br>
</div><br>
<fieldset>
<legend>Contact Information</legend>
<label for="firstName" style="margin-left: 30px">First Name: </label>
<input type="text" id="firstName" name="firstName" size="50"><br>
<label for="lastName" style="margin-left: 33px">Last Name: </label>
<input type="text" id="lastName" name="lastName" size="50"><br>
<label for="email" style="margin-left: 67px">Email: </label>
<input type="text" id="email" name="email" size="60"><br>
<label for="phone" style="margin-left: 64px">Phone: </label>
<input type="text" id="phone" name="phone" size="30"><br>
</fieldset><br>
<fieldset>
<legend>Delivery Information</legend>
<div>
<div class="one">
<label for="date">Requested Delivery Date: </label>
<input type="date" id="date" name="date"><br><br>
<p>If not one is home to receive the plants, <br>where would you like them left?</p>
<label>Check All that Apply!</label><br>
<input type="checkbox" id="porch" name="porch" value="Porch">
<label for="porch"> Leave on front porch</label><br>
<input type="checkbox" id="backDoor" name="backDoor" value="BackDoor">
<label for="backDoor"> Leave at back door</label><br>
<input type="checkbox" id="garage" name="garage" value="Garage">
<label for="garage"> Leave in garage</label><br>
<input type="checkbox" id="no" name="no" value="No">
<label for="no"> Do not leave outside</label>
</div>
<div class="two">
<label for="instructions">Special Delivery Instructions</label><br>
<textarea id="instructions" name="instructions" rows="10" cols="50"></textarea>
</div>
</div>
</fieldset><br><br>
<input type="reset" value="CLEAR" style="margin-right: auto; font-size: 20px;">
<input type="submit" form="orderForm" value="SUBMIT" style="font-size: 20px;">
</fieldset>
</form>
</div>
<br>
<footer>
<a href="../index.htm">Home</a><br><br>
<script>
document.write("This page was last modified by --: ");
document.write(document.lastModified);
</script>
</footer>
</div>
</body>
</html>
I’ve edited the onsubmit lines in both the submit input and the form input, using one or the other (referring back to validateEntries()), or both. I’ve also placed CalcOrderTotal() in the onsubmit part instead and still had no luck. I know that the .focus() part of the Javascript code is working since it always refreshes back to that, but for whatever reason the rest of my functions are not being read.
>Solution :
first of all, you have some syntax errors:
alert == "Please Enter your First Name!");
This should be:
alert("Please Enter your First Name!");
second:
} else if (!email == "" && !email.includes("@") {
missing ")"
} else if (!email == "" && !email.includes("@")) {
third:
} else if (phone == "" and email == "") {
"and" do not exists in JS, replace with &&
} else if (phone == "" && email == "") {
fix it and try again