We help IT Professionals succeed at work.
Get Started

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

rosse_f
rosse_f asked
on
240 Views
Last Modified: 2012-05-06
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

Comment
Watch Question
Commented:
This problem has been solved!
Unlock 2 Answers and 6 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE