Solved: Use javascript to update cost and format as currency and place in html table

I am very new at javascript and html.
My problem is:
I want to have a table that customers can customize their alarm package. When they use the drop down option list for a line item, would like to have the selection price show the updated cost. My preference would be to use something like mouseup on the option lists rather than the update cost button. I want to format the selection price as currency. i've not been able to update the selection price. Have tried: document.all('mycell').innerText =document.getElementById('mycontrolbox').value*125; and other methods but am stupped.
Would like to calculate the total cost of the custom package. and if possible post the custom quantity and price for each line to the shopping cart.
I know this is asking a lot, but I'm totally lost for the past week.--help
Below is an abreviated table and some html code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
<style type="text/css">
<!--
table#Mytable {
  width: 50%;
	border: solid #000000 3px;
	background-color:#FFFFFF;
	padding: 6px;
	}
	
table#Mytable td{
  height: 60px;
	border: solid #000000 2px;
	}
	
.leftcol{
  font-weight: bold;
	text-align: center;
	width: 50%px;
	border: solid #000000 2px;
	background-color: #CCCCCC;
	}
.photocol{
  font-weight: bold;
	text-align: center;
	width: 10%px;
	background-color: #CCCCCC;
	border: solid #000000 2px;
	}
	
.rightcol{
  font-weight: bold;
	text-align: center;
	width: 50%px;
	border: solid #000000 2px;
	background-color: #00ccff;
	}		
// -->
</style>
 
<script type="text/javascript">
function prod()
{
x=document.getElementById('mycontrolbox').value*125;
y=document.getElementById('mylabel').value*3;
//alert is only for me to check the calculation, will be deleted
alert(x);
alert(y);}
</script>
 
 
</head>
<body>
 
<div id=mydiv>
 
 
 
<table id="mytable">
<tr> 
		 <th class = "leftcol">DESCRIPTION</th>
		 <th class="photocol">PHOTO</th>
		 <th class = "leftcol">STANDARD <br />PACKAGE<br />QUANTITY</th>
		 <th></th>
		 <th class = "rightcol">CUSTOM<br />PACKAGE<br />PRICE per ITEM</th>
		 <th class = "rightcol">CUSTOM PACKAGE QUANTITY<br />
		 		 (NOTE: All quantities can be changed in cart)</th>
		 <th class = "rightcol">SELECTION PRICE</th>
		 <th class = "rightcol">UPDATED PRICE BUTTONS</th>
		 <th class = "rightcol">ADD ITEM TO SHOPPING CART</th>
		 <th class = "rightcol">TOTAL CUSTOM PACKAGE PRICE</th>
</tr>
 
<tr>
		<td ><b>Alarm control box with siren<br />
		and 2 ea. key-fob remote controls </b></td>
		<td align="center"><img  border="1" height = "60" width="60" alt="Model 201 Control Box,siren and two key-fob remotes"  src="images/model201.jpg" /></td>	
		<td align="center"><b>1 Ea.</b></td>
		<td width="40"></td>
		<td align="center"><b>$125.00 Ea.</b></td>
		<td><SELECT name="mycontrolbox">
           <OPTION value=0>None</OPTION>
           <OPTION value=1 >1 ea. Model 201 Control</OPTION>
        </SELECT></td>
		<td id=mycell align="center"><b>$0.00</b></td>
		<td><INPUT type=button value="Update Cost" onclick="prod();"></td>	
		<td><form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0"name="submit" alt="Make payments with PayPal - it's fast, free and secure!"><img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> <input type="hidden" name="add" value="1"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="x@somewhere.com"> <input type="hidden" name="item_name" value=
    "Model 201 Alarm Control Box"><input type="hidden" name="amount" value="125.00"> <input type="hidden" name="no_shipping" value="2"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="lc"value="US"> <input type="hidden" name="bn" value="PP-ShopCartBF"></form>		
		<td id=mycell align="center"><b>$0.00</b></td>
</tr>
 
<tr>
		<td ><b>The flashing LED is not available for this alarm</b></td>
		<td align="center"><b>N/A</b></td>
		<td align="center"><b>N/A</b></td>
		<td></td>
		<td align="center"><b>N/A</b></td>
		<td align="center"><b>N/A</b></td>
		<td id=mycell1 align="center"><b>N/A</b></td>	
		<td align="center"><b>N/A</b></td>	
		<td align="center"><b>N/A</b></td>
		<td align="center"><b>N/A</b></td>
</tr>
 
<tr>
		<td ><b>Alarm warning labels</b></td>
		<td align="center"><img  border="1"  width="60" alt="Warning label"  src="images/wlabel.jpg" /></td>
		<td align="center"><b>2 Ea.</b></td>
		<td></td>
		<td align="center"><b>$3.00 Ea.</b></td>
		<td><SELECT name="mylabel">
           <OPTION value="0">None</OPTION>
           <OPTION value="1">1 ea. warning label</OPTION>
					 <OPTION value="2">2 ea. warning label</OPTION>
					 <OPTION value="3">3 ea. warning label</OPTION>
					 <OPTION value="4">4 ea. warning label</OPTION>
					 <OPTION value="5">5 ea. warning label</OPTION>
					 <OPTION value="6">6 ea. warning label</OPTION>
					 <OPTION value="7">7 ea. warning label</OPTION>
					 <OPTION value="8">8 ea. warning label</OPTION>
					 <OPTION value="9">9 ea. warning label</OPTION>
					 <OPTION value="10">10 ea. warning label</OPTION>
        </SELECT></td>
				<td id=mycell align="center"><b>$0.00</b></td>
				<td><INPUT type=button value="Update Cost" onclick="prod();"></td>	
				<td><form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0"name="submit" alt="Make payments with PayPal - it's fast, free and secure!"><img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> <input type="hidden" name="add" value="1"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="x@somewhere.com"> <input type="hidden" name="item_name" value=
    "Warning label"><input type="hidden" name="amount" value="3.00"> <input type="hidden" name="no_shipping" value="2"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="lc"value="US"> <input type="hidden" name="bn" value="PP-ShopCartBF"></form>		
</tr>
 
</table>
</form>
</div>
</body>
</html>

Open in new window