troubleshooting Question

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

Avatar of rosse_f
rosse_f asked on
JScript
6 Comments2 Solutions241 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
rosse_f

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 2 Answers and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros