Javascript Order Forms

Saundatron · 08-14-2009, 03:11 PM

I have a programming assignment due for Monday and If I dont pass it I'm probably out of college. Ihave tried and tried to do it myself but I just cant figure it out. I need some help. Heres what I have to be able to do:

You have been asked to design a program using a html form for user input
and the same form will also display the output within the browser window.
To refresh your memory of html forms I have provided the code for the
necessary form, feel free to add some presentation features of your own the
form provided.
The program looks for the users to input a customer’s name and phone
number, the next section within the form looks for the users to select certain
items to be dry cleaned, the user can choose to input up to four items, the
first two items are shirts and pants, these have a fixed cost, for cleaning shirts
the cost is €1.50 per shirt and pants are €2.50 per pants, the user can enter
the quantity to be cleaned for each item, then they must click the calc button
to display sub-total for each item in the text area provided (sub-total is the
number of items * by the cost of the item to be cleaned). The user may
choice from a drop down list as to the two remaining items to be dry cleaned,
they need to enter a Unit Price and the Quantity (Qty) again they must click
the calc button to work out the cost of cleaning each item. Once the users
has completed placing the orders, (again the user may choose to select 1 to
4 items) the user must then click the calculate Order button, this display the
total cost of order, the tax for the total order and finally the total cost + tax.

Saundatron · 08-14-2009, 03:12 PM

Heres what Ive done so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html lang="en">
<head>
<title>DCY Dry Cleaning</title>
<style type="text/css" media="screen">
body
{
text-align: center;
background: #B0BFC2;
color: #444;
}

#container
{
text-align: left;
margin: 0 auto;
width: 1000px;
background: #FFF url(header-base.gif) repeat-y;
}

h1
{
background: #D36832;
color: #FFF;
padding: 20px;
margin: 0;
border-bottom: 5px solid #387A9B;
}

#nav
{
float: left;
width: 130px;
display: inline;
margin-left: 20px;
padding: 15px 0;
}

#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: right;
}

#nav li
{
background: url(header-bullet.gif) no-repeat 100% .4em;
padding: 0 10px 5px 0;
}

#content
{
float: left;
width: 475px;
margin-left: 45px;
padding: 15px 0;
}

#footer
{
clear: both;
background: #387A9B;
color: #fff;
padding: 5px 10px;
text-align: right;
font-size: 80%;
}

h2
{
margin-top: 0;
color: #B23B00;
font-weight: normal;
}

a:link { color: #175B7D; }
a:visited { color: #600; }

a:hover, a:active
{
color: #fff;
background: #175B7D;
}
</style>
</head>
<body>
<div id="container">
<h1>
DCU Dry Cleaning Services
</h1>
<div id="nav">
<ul>
<li><a href="http://www.computing.dcu.ie/~saundej5/cleaningCompany.html">Home</a></li>
<li><a href="http://www.dcu.ie/">DCU</a></li>

</ul>
</div>
<div id="content">
<h2>
Order Identification
</h2>
<p>
<tr>
<td width="100">Customer Name:</td>
<td width="100"><input type="text" name="CustomerName"
size="20"></td>
<br><td width="100">Customer Phone:</td>
<td width="100"><input type="text" name="CustomerPhone"
size="20"></td>
</tr>
</table>
<hr>
<table border="0" width="496">
<tr>
<td width="350">
<table border="0" width="350">
<tr>
<td width="128"><b>Item Type</b></td>
<td width="51"><b>Unit Price</b></td>
<td width="20"><b>Qty</b></td>
<td width="46"></td>
<td width="66"><b>Sub-Total</b></td>
</tr>
<tr>
<td width="128">Shirts</td>
<td width="71"><input type="text" name="ShirtUnitPrice"
size="7" value="1.50"></td>
<td width="38"><input type="text" name="ShirtQuantity"
size="4" value="0"></td>
<td width="46"><input type="button" value="Calc"
name="btnShirts" onClick="processItems()"></td>
<td width="66"><input type="text" name="ShirtSubTotal" size="8"
value="0.00"></td>
</tr>
<tr>
<td width="128">Pants</td>
<td width="71"><input type="text" name="PantsUnitPrice"
size="7" value="2.50"></td>
<td width="38"><input type="text" name="PantsQuantity"
size="4" value="0"></td>
<td width="46"><input type="button" value="Calc"
name="btnPants"
onClick="processItems()"></td>
<td width="66"><input type="text" name="PantsSubTotal"
size="8" value="0.00"></td>
</tr>
<tr>
<td width="128"><select size="1" name="cboItem1">
<option selected>None</option>
<option>Women Suit</option>
<option>Dress</option>
<option>Regular Skirt</option>
<option>Skirt With Hook</option>
<option>Men's Suit 2Pc</option>
<option>Men's Suit 3Pc</option>
<option>Sweaters</option>
<option>Silk Shirt</option>
<option>Tie</option>
<option>Coat</option>
<option>Jacket</option>
<option>Swede</option>
</select></td>
<td width="71"><input type="text" name="Item1UnitPrice"
size="7" value="0.00"></td>
<td width="38"><input type="text" name="Item1Quantity"
size="4" value="0"></td>
<td width="46"><input type="button" value="Calc"
name="btnItem1"
onClick="processItems()"></td>
<td width="66"><input type="text" name="Item1SubTotal" size="8"
value="0.00"></td>
</tr>
<tr>
<td width="128"><select size="1" name="Item2">
<option selected>None</option>
<option>Women’s Suit</option>
<option>Dress</option>
<option>Regular Skirt</option>
<option>Skirt With Hook</option>
<option>Men's Suit 2Pc</option>
<option>Men's Suit 3Pc</option>
<option>Sweaters</option>
<option>Silk Shirt</option>
<option>Tie</option>
<option>Coat</option>
<option>Jacket</option>
<option>Swede</option>
</select></td>
<td width="71"><input type="text" name="txtItem2UnitPrice" size="7"
value="0.00"></td>
<td width="38"><input type="text" name="txtItem2Quantity" size="4"
value="0"></td>
<td width="46"><input type="button" value="Calc" name="btnItem2"
onClick="processItems()"></td>
<td width="66"><input type="text" name="txtItem2SubTotal" size="8"
value="0.00"></td>
</tr>
</table>
</td>
<td width="201">
<table border="0" width="100%">
<tr>
<td width="100%" align="center" colspan="2"><input type="button"
value="Calculate Order"
name="btnCalculate" onClick="processOrder()"></td>
</tr>
<tr>
<td width="50%">Cleaning Total:</td>
<td width="50%"><input type="text" name="CleaningTotal"
size="8" value="0.00"></td>
</tr>
<tr>
<td width="50%">Tax Rate</td>
<td width="50%"><input type="text" name="TaxRate" size="6"
value="5.75">%</td>
</tr>
<tr>
<td width="50%">Tax Amount:</td>
<td width="50%"><input type="text" name="TaxAmount"
size="8" value="0.00"></td>
</tr>
<tr>
<td width="50%">Order Total:</td>
<td width="50%"><input type="text" name="OrderTotal"
size="8" value="0.00"></td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
<p><input type="reset" value="Start New Cleaning Order"
name="btnNewOrder"></p>
</form>
</p>
</div>
<div id="footer">
Copyright © Dublin City University 2009
</div>
</div>
</body>
</html>

Saundatron · 08-14-2009, 03:14 PM

Can anyone help me? I know im asking a lot but im desperate!!!
Need to have this completed by monday

Philip M · 08-14-2009, 04:08 PM

Have you read the forum rules and posting guidelines re homework?

You appear to have not produced any Javascript at all.

eddjc · 08-14-2009, 05:52 PM

jees man why on earth are you bothered about flunking out of school? You're clearly not interested in doing the work!