Menu
Im working on an assignment and I’m trying to add JS to a food menu. I need to be able add up the price, and pst/gst, and totals. I’m looking for examples on how to calculate the order in javascript.
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script type=”text/javascript”>
function $_(IDS) { return document.getElementById(IDS); }
var ErrMessages = [
‘First name’, ‘Last name’, ‘Street number’, ‘Street name’,
‘City name’, ‘Postal code’, ‘Phone number’, ‘Email’
];
function formValidator(){
var ErrMsg = [];
if ($_(‘firstName’).value == “”) { ErrMsg.push(0); }
if ($_(‘lastName’).value == “”) { ErrMsg.push(1); }
if ($_(‘streetNumber’).value == “”) { ErrMsg.push(2); }
if ($_(‘streetName’).value == “”) { ErrMsg.push(3); }
if ($_(‘cityName’).value == “”){ ErrMsg.push(4); }
if ($_(‘postalCode’).value == “”) { ErrMsg.push(5); }
if ($_(‘phoneNumber’).value == “”) { ErrMsg.push(6); }
if ($_(’email’).value == “”) { ErrMsg.push(7); }
if ((ErrMsg.length-1) >= 0) {
var str = ”;
for (var i=0; i<ErrMsg.length; i++) {
str += ErrMessages[ErrMsg[i]]+ ‘ is not entered.n’;
}
alert(str);
return false;
}
if (totalOrder()) { alert(‘You must order something’); return false; }
alert(totalOrder)
}
function comments()
{
(document.getElementById(“comments”).value);
}
function howtoget() {
var readyTime = [
“Your food will be ready for pickup in 10 minutes”,
“Your food will be delevered in 20 minutes”,
“Your table will be ready in 5 minutes”,
];
if ($_(‘pickUp’).checked) { alert(readyTime[0]); }
if ($_(‘delivery’).checked) { alert(readyTime[1]); }
if ($_(‘eatin’).checked) { alert(readyTime[2]); }
$_(‘submit’).addEventListener(“click”, howtoget, false);
}
document.getElementById(‘cancel’).reset();
function sendOrder() {
alert(‘You must order something’);
}
</script>
</head>
<body>
<form>
<center>
<B>The JavaScript Eatery
</center>
<form>
<table align=”center” border=”1″>
<tbody>
<tr>
<td><center>
<b>vital information</b>
</center>
<table>
<tbody>
<tr>
<td>first name</td>
<td><input /></td>
</tr>
<tr>
<td>last name</td>
<td><input /></td>
</tr>
<tr>
<td>street number</td>
<td><input /></td>
</tr>
<tr>
<td>street name</td>
<td><input /></td>
</tr>
<tr>
<td>city</td>
<td><input /></td>
</tr>
<tr>
<td>postal code</td>
<td><input /></td>
</tr>
<tr>
<td>phone number</td>
<td><input size=”4″ />
–
<input size=”5″ /></td>
</tr>
<tr>
<td>email address</td>
<td><input /></td>
</tr>
</tbody>
</table></td>
<td valign=”top”>comments / special request<br />
<textarea rows=”10″ cols=”35″></textarea>
</td>
</tr>
</tbody>
</table>
<hr />
<table width=”90%”>
<tbody>
<tr>
<td><table>
<tbody>
<tr>
<th>item</th>
<th>price</th>
<th>quantity</th>
<th>sub-total</th>
</tr>
<tr align=”middle”>
<td align=”left”>Hamberger</td>
<td><input size=”6″ value=”$2.99″ /></td>
<td><input size=”3″ /></td>
<td><input size=”6″ /></td>
</tr>
<tr align=”middle”>
<td align=”left”>Cheeseburger</td>
<td><input size=”6″ value=”$3.99″ /></td>
<td><input size=”3″ /></td>
<td><input size=”6″ /></td>
</tr>
<tr align=”middle”>
<td align=”left”>Chicken Burger</td>
<td><input size=”6″ value=”$4.99″ /></td>
<td><input size=”3″ /></td>
<td><input size=”6″ /></td>
</tr>
</tbody>
</table></td>
<td align=”right”><table>
<tbody>
<tr>
<th>item</th>
<th>price</th>
<th>quantity</th>
<th>sub-total</th>
</tr>
<tr align=”middle”>
<td align=”left”>French Fries</td>
<td><input size=”6″ value=”$2.99″ /></td>
<td><input size=”3″ /></td>
<td><input size=”6″ /></td>
</tr>
<tr align=”middle”>
<td align=”left”><input type=”checkbox” />
gravy</td>
<td><input size=”6″ value=”$0.50″ /></td>
<td><input size=”3″ /></td>
<td><input size=”6″ /></td>
</tr>
<tr align=”middle”>
<td align=”left”><input type=”checkbox” />
chilli</td>
<td><input size=”6″ value=”$1.99″ /></td>
<td><input size=”3″ /></td>
<td><input size=”6″ /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan=”2″><table align=”center”>
<tbody>
<tr>
<td>subtotal</td>
<td><input size=”6″ /></td>
</tr>
<tr>
<td>pst</td>
<td><input size=”6″ /></td>
</tr>
<tr>
<td>gst</td>
<td><input size=”6″ /></td>
</tr>
<tr>
<td>total</td>
<td><input size=”6″ /></td>
</tr>
<tr>
<td colspan=”2″><input type=”button” value=”total up order” />
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<hr />
<table width=”80%” align=”center”>
<tbody>
<tr>
<td><table>
<tbody>
<tr align=”middle”>
<td>Payment</td>
<td>card number</td>
<td>expiration mm/yy</td>
</tr>
<tr align=”middle”>
<td><select>
<option selected=”selected”>cash</option>
<option>master card</option>
<option>visa</option>
</select>
</td>
<td><input />
</td>
<td><select>
<option selected=”selected”>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option selected=”selected”>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
</select>
</td>
</tr>
</tbody>
</table></td>
<td align=”middle”><table>
<tbody>
<tr>
<td><input type=”radio” NAME=”radio” value=”Your food will be ready for pickup in 10 minutes” id=”pickup” onClick=”alert(value)”></td>
<td>pickup</td>
</tr>
<tr>
<td><input type=”radio” NAME=”radio” value=”Your food will be ready for delivery in 20 minutes” id=”delivery” onClick=”alert(value)”></td>
<td>delivery</td>
</tr>
<tr>
<td><input type=”radio” NAME=”radio” value=”Your table will be ready in 5 minutes” id=”eatin” onClick=”alert(value)”></td>
<td>eat in</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<center>
<input type=”reset” id=”cancel” name=”clear” value=”clear order”/>
<input type=”button” id=”send” value=”send order” onclick=”sendOrder()” />
</center>
</form>
<p> </p>
<p><asp:Content ID=”Content1″ ContentPlaceHolderID=”ContentPlaceHolder1″ Runat=”Server”></asp:Content></p>
<p> </p>
</form>
</body>
</html>