Hi
I run a small website for ex members of an RAF Squadron. We would like to offer items for sale on the site but do not want to go down the route of a shopping trolly scenario where by we have to deal with electronic cash payments. To this end I have done a small page that has a table. I would like to be able to present the prospective purchaser with a total cost per item and at the end of their shopping trip the total cost of all goods. I was wondering if anyone could help me with the code
i.e one field is item quantity the other is item total so the math is x*y is simple, even this old grey hair. I can work that out, but how do I make it look pretty on the site?
I have tried to do it using the form calculator jbot in frontpage, but this throws up an error when I try to launch it while in a field in the table.
Below is the web page relating to the table. Apologies to the purists who know all the ins and outs, and think it's untidy stuff, but I am just learning css etc and rather late into the game.
<style type="text/css" media="screen">
.datatable {
border: 1px solid #D6DDE6;
border-collapse: collapse;
width: 10%;
}
.datatable caption {
color: #33517A;
font: bold 1.2em Arial, Helvetica, sans-serif;
padding-bottom: 8px;
padding-top: 3px;
text-align: left;
}
.datatable td {
border: 1px solid #D6DDE6;
padding: 4px;
}
.datatable th {
background-color: #BCBCBC;
border: 1px solid #828282;
color: Navy;
font: sans-serif;
font-style: italic;
text-align: center;
font-weight: bold;
padding-left: 4px;
}
.datatable tr.altrow {
background-color: #FFFFBB;
color: Navy;
font: sans-serif;
font-style: oblique;
text-align: justify;
font-weight: bold;
padding-left: 4px;
}
</style>
</head>
<body>
<img src="images/sqnshop.jpg" style="margin-left: 10em;" />
<h1 style="color: #0002DD; text-align: center;">Welcome to the 202 Squadron Shop</h1>
<div id="side1">
<h3>Navigation</h3>
<ul>
<li><a href="">Home Page</a></li>
<li><a href="">Squadron History</a></li>
<li><a href="">Association Scrapbook</a></li>
<li><a href="l">The Line Book</a></li>
<li><a href="l">The Mucky Duck</a></li>
<li><a href="l">Members Directory</a></li>
<li><a href="">Requests For Assistance</a></li>
<li><a href="">Constitution & Committee</a></li>
<li><a href=">Contact us</a></li>
<li><a href="">Links To Friends & Associates</a></li>
</ul>
</div>
<div id="content">
With the exception of any items marked "Squadron Only", these items are offered for sale to all visitors to the site.
Please Note: These items are offered by kind permission of the Officer Commanding 202 Squadron. The Squadron do not undertake on line payments. All transactions must be by a cheque for the correct amount in sterling and encashable at a UK bank. Goods will not be sent until confirmation that the cheque has cleared and the requisite funds are deposited in their account. There will be no relaxation of these rules
<form method="post" action="action="http://www/">
<table summary="202 Squadron Shop Price List" class="datatable" style="font-family: Verdana, Arial, sans-serif; font-size: 1em; ">
<tr>
<th scope="col">Item</th>
<th scope="col">Item Cost</th>
<th scope="col">Qty Req'd</th>
<th scope="col">Total Item Cost</th>
</tr>
<tr class="altrow" style="font-family: Verdana, Arial, sans-serif; font-size: 0.7em;">
<td>Engraved Sqn Tankard</td><td>�16.00</td><td><span><label for="tankard"></label><input type="text" name="tankard" id="tankard" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td><td><span><label for="tankcost"></label><input type="text" name="tankcost" id="tankcost" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td></tr><tr class="altrow" style="font-family: Verdana, Arial, sans-serif; font-size: 0.7em;"><td>Squadron Tie</td><td>�6.00</td><td><span><label for="tie"></label><input type="text" name="tie" id="tie" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td>
<td><span><label for="tiecost"></label><input type="text" name="tiecost" id="tiecost" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td></tr>
<tr class="altrow" style="font-family: Verdana, Arial, sans-serif; font-size: 0.7em;"><td>Sqn Plaque</td><td>�21.00</td><td><span><label for="plaque"></label><input type="text" name="plaque" id="plaque" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td><td><span><label for="plaquecost"></label><input type="text" name="plaquecost" id="plaquecost" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td></tr>
<tr class="altrow" style="font-family: Verdana, Arial, sans-serif; font-size: 0.7em;"><td>Squadron Cummerbund</td><td>�20.00</td><td><span><label for="cummerb"></label><input type="text" name="cummerb" id="cummerb" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td>
<td><span><label for="cummerbcost"></label><input type="text" name="cummerbcost" id="cummerbcost" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td></tr><tr class="altrow" style="font-family: Verdana, Arial, sans-serif; font-size: 0.7em;"><td>Sqn Print</td><td>�7.50</td>
<td><span><label for="sqnprint"></label><input type="text" name="sqnprint" id="sqnprint" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td>
<td><span><label for="printcost"></label><input type="text" name="printcost" id="printcost" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td></tr>
<tr class="altrow" style="font-family: Verdana, Arial, sans-serif; font-size: 0.7em;"><td>Squadron Cufflinks</td><td>�6.00</td><td><span><label for="cufflinks"></label><input type="text" name="cufflinks" id="cufflinks" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td>
<td><span><label for="cuffcosts"></label><input type="text" name="cuffcost" id="cuffcost" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td></tr><tr class="altrow" style="font-family: Verdana, Arial, sans-serif; font-size: 0.7em;"><td>Squadron Tiepins</td><td>�4.00</td>
<td><span><label for="tiepins"></label><input type="text" name="tiepins" id="tiepins" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td>
<td><span><label for="tiepincosts"></label><input type="text" name="tiepincosts" id="tiepincosts" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td></tr>
<tr class="altrow" style="font-family: Verdana, Arial, sans-serif; font-size: 0.7em;"><td>Bookmark (Photo & Sqn history)</td><td>�1.00</td><td><span><label for="bookmark"></label><input type="text" name="bookmark" id="bookmark" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td><td><span><label for="bookmarkcosts"></label><input type="text" name="bookmarkcosts" id="bookmarkcosts" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td></tr>
<tr class="altrow" style="font-family: Verdana, Arial, sans-serif; font-size: 0.7em;"><td>Sea King Postcard</td><td>�0.25</td><td><span><label for="postcard"></label><input type="text" name="postcard" id="postcard" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td><td><span><label for="postcardcosts"></label><input type="text" name="postcardcosts" id="postcardcosts" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td></tr>
<tr class="altrow" style="font-family: Verdana, Arial, sans-serif; font-size: 0.7em;">
<td>Total
Unit Cost</td><td></td><td></td><td><span><label for="totalcostscosts"></label><input type="text" name="totalcosts" id="totalcosts" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span>
</td></tr><tr class="altrow" style="font-family: Verdana, Arial, sans-serif; font-size: 0.7em;"><td>Postage & Packing</td><td></td><td></td>
<td><span><label for="postandpack"></label><input type="text" name="postandpack" id="postandpack" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td></tr><tr class="altrow" style="font-family: Verdana, Arial, sans-serif; font-size: 0.7em;"><td>Amount Due</td><td></td><td></td><td><span><label for="amount_due"></label><input type="text" name="amount_due" id="amount_due" size="3" style="font-family: Arial; font-size: 1em; font-weight: bold" /></span></td></tr>
<label for="Forename">Please enter your first name: </label><input type="text" name="Forename" id="Forename" size="25" style="font-family: Verdana,Arial,sans-serif; font-size: 0.8em; font-weight: bold;" /><br />
<label for="Surname">Please enter your surname: </label><input type="text" name="surname" id="surname" size="25" style="font-family: Verdana,Arial,sans-serif; font-size: 0.8em; font-weight: bold" />
<label for="email_address">Please enter your e-mail address: </label><input type="text" name="email" id="email_address" size="80" style="font-family: Verdana,Arial,sans-serif; font-size: 0.8em; font-weight: bold" />
<input type="hidden" name="subject" value="202 Squadron Giftshop Order" />
<input type="hidden" name="required" value="email,surname " />
<input type="hidden" name="redirect" value="http://www" />
<input class="green" type="submit" value="Send Order"/> <input class="red" type="reset" value="Cancel Order"/>
</form>
</div>
<div id="side2">
<h3></h3>
</div>
</body>
</html>
Any suggestions will be gratefully received
Cheers
