rosse_f
asked on
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').inn
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.
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').inn
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>
SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
quincydude:
For some reason I think i made an error in copying the code over to my editor. Looks like I caused the problem.
rosse_f:
For some reason I think i made an error in copying the code over to my editor. Looks like I caused the problem.
rosse_f:
what do u mean? added the dollar sign
<!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);
tot = x + y;
document.getElementById('mycell1').innerHTML = "<b>$" + x + "</b>";
document.getElementById('mycell3').innerHTML = "<b>$" + y + "</b>";
document.getElementById('mycelltot').innerHTML = "<b>$" + tot + "</b>";
}
</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" onchange="prod();">
<OPTION value=0>None</OPTION>
<OPTION value=1 >1 ea. Model 201 Control</OPTION>
</SELECT></td>
<td id=mycell1 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=mycelltot 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=mycell2 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" onchange="prod();">
<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=mycell3 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
I added "$"+ in the script and got the $. Since the cents are not always even dollars we cannot always add two zeros. I love what you have accomplished for me. If we can get the cents added in the format you will make me very very happy. You would not believe how many hours I have spent in study and effort this past week.
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
You have certainly got me part of the way. Why the numbers across the top of the html page?
Can you give me a hand in changing the format from say 125 to $125.00?
frosse