I am doing an assignment for school and it is a restaurant website. I am working on the "order online" page. I must include a table in my website so I put it in my form with all of my menu items and their cost and the total. The problem I am having is: I have each menu item wrapped in a form element in order to make my Javascript work but when I try to validate it, I get errors because my fieldset is outside of a form element and if I move it around I go from 3 errors to 150 and I just don't really understand why. Also, this is causing a problem with my reset button because the reset button is in a different form element then each menu item, and finally I can't get my grand total at the bottom working.
<!DOCTYPE html>
<html>
<head>
<title>Lefebvre-Oliver Final Assignment</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="Final2.css" media="screen">
<script type="text/javascript">
function multiply(element) {
var form = element.form;
form.TOTAL.value = element.value * form.PRICE.value;
}
</script>
</head>
<body>
<form id="contact-form" action="script.php" method="post">
<input type="hidden" name="redirect" value="file:///D:/Final%20Project/index.html"/>
<h1>Order Online</h1>
</form>
<form>
<fieldset>
<legend>Basic Information</legend>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value=""/>
</li>
<li>
<label for="address">Address:</label>
<input type="text" name="address" id="address" value=""/>
</li>
<li>
<label for="pwd">City</label>
<input type="text" name="city" id="city" value=""/>
</li>
</ul>
</form>
<form>
<div>Would you like the same order as last time?</div>
<label for="yes">Yes</label>
<input type="radio" name="yes" id="yes" value="yes" checked="checked">
<label for="no">No</label>
<input type="radio" name="yes" id="no" value="no"/>
<div>Special Instructions:</div>
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
</fieldset>
</form>
<form>
<fieldset>
<legend>Order</legend>
<table style="width:100%">
<tr>
<th>Food Item</th>
<th>Quantity</th>
<th>Unit Price in ($)</th>
<th>Total Price in ($)</th>
</tr>
</form>
<form>
<tr>
<th>Appetizers</th>
</tr>
</form>
<form>
<tr>
<td>Bruschetta con Crema di Agliotoa</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="8" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Spiedini di Albicocca al Prosciutto Crudo</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="9" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Tortino di Gorgonzola</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="8" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<th>Soup and Salads</th>
</tr>
</form>
<form>
<tr>
<td>Zuppa di Giorno</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="5" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Minestrone Piemontese</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="5" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Zuppa de Pesce</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="8" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Insalata Mista</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="6" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Insalata Fagioli</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="6" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<th>Pizza</th>
</tr>
</form>
<form>
<tr>
<td>Margherita</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="10" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Sicilian</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="12" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Chicken Florentine</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="12" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<th>Pasta</th>
</tr>
</form>
<form>
<tr>
<td>Bucatini all'Amatriciana</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="16" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Rigatoni Alla Siciliana</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="12" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Paglia e Fieno</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="14" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Orecchiette con Rapini</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="14" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Pappardelle con Sugo di Coniglio</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="15" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<th>Dessert</th>
</tr>
</form>
<form>
<tr>
<td>Chocolate Zabaglione Cake</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="6" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Zuccotto</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="6" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Tira Misu</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="6" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<th>Beverages</th>
</tr>
<tr>
<td>Sparkling Water</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="2" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Coke, Iced Tea, Root Beer, Cream Soda</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="2" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Coffee and Brewed Decaf</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="3" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Cappuccino or Americano</td>
<td><input name="QTY" onKeyUp="multiply(this)"></td>
<td><input name="PRICE" value="3" readonly></td>
<td><input name="TOTAL" readonly/></td>
</tr>
</form>
<form>
<tr>
<td>Total Cost:</td>
<td></td>
<td></td>
<td><label>Total amount</label>
<input disabled></td>
</tr>
</form>
</table>
<input type="submit" id="submit" value="Submit"/>
<input type="reset" id="reset" value="Reset"/>
</fieldset>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire