Calculating Price in JavaScript

Question

Rblalock 0 Newbie Poster

14 Years Ago

I need help understand where to place (and how to create)

function calcPrice() {
  product = document.form1.prod;
  pindex = product.selectedIndex;
  product_price = product.options[pindex].value;
  quantity = document.form1.qty;
  qindex = quantity.selectedIndex;
  quantity_ordered = quantity.options[qindex].value;
  document.form1.price.value = product_price*quantity_ordered;
}

. I also need to know where to add the

onchange = "calcPrice()"

event handler. I will post my coding below, please help.

<html>
<head>
<title>Moultrie Technical College - Worth County Campus</title>

/* Ryan Blalock (ShoppingCart.htm)
10/29/09 */

body {
background: transparent url(images/bg.gif) repeat left top; }

table {
color:white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-size: 10pt;
font-family: arial,helvetica,sans-serif;
background-color: black; }

td#header {
font-size: 16pt;
text-align: center; }

td, th {
padding: .3em; }

td.align {
vertical-align: top; }

h1 {
width: 775px;
height: 125px;
font-size: 20pt;
font-family: "bernhardmod BT",serif;
padding: 15 15 0 40;
background-image: url(logo.png);
background-repeat: no-repeat;
text-align: center;
border-bottom: groove thick;
margin-bottom: 0; }

.center {
text-align: center; }

tr#black {
color: white;
background-color: black;
font-weight: bold;
text-align: center; }

tr#nav {
color: black;
background: #000 url(images/headergradient.png) repeat-x left bottom;
font-weight: bold;
text-align: center; }

tr#header {
color: black;
background-color: #FFF;
font-weight: bold;
text-align: center; }

td#body {
color: black;
background-color: #FFF;
text-align: justify; }

</style>

var imageclock=new Object()
//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
imageclock.digits=["images/clock/c0.gif", "images/clock/c1.gif", "images/clock/c2.gif",

"images/clock/c3.gif", "images/clock/c4.gif", "images/clock/c5.gif", "images/clock/c6.gif",

"images/clock/c7.gif", "images/clock/c8.gif", "images/clock/c9.gif", "images/clock/cam.gif",

"images/clock/cpm.gif", "images/clock/colon.gif"]
imageclock.instances=0
var preloadimages=[]
for (var i=0; i<imageclock.digits.length; i++){ //preload images
preloadimages=new Image()
preloadimages.src=imageclock.digits
}

imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of

images instead
var sections=timestring.split(":")
if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
sections[0]="12"
else if (sections[0]>=13)
sections[0]=sections[0]-12+""
for (var i=0; i<sections.length; i++){
if (sections.length==1)
sections='<img src="'+imageclock.digits[0]+'" />'+'<img

src="'+imageclock.digits[parseInt(sections)]+'" />'
else
sections='<img

src="'+imageclock.digits[parseInt(sections.charAt(0))]+'" />'+'<img

src="'+imageclock.digits[parseInt(sections.charAt(1))]+'" />'
}
return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img

src="'+imageclock.digits[12]+'" />'+sections[2]
}

imageclock.display=function(){
var clockinstance=this
this.spanid="clockspan"+(imageclock.instances++)
document.write('<span id="'+this.spanid+'"></span>')
this.update()
setInterval(function(){clockinstance.update()}, 1000)
}

imageclock.display.prototype.update=function(){
var dateobj=new Date()
var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds()

//create time string
var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img

src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
document.getElementById(this.spanid).innerHTML=currenttimeHTML

}
</script>

function startForm() {
document.form1.date.value = todayTxt();
document.form1.prod.focus();
}

function calcPrice() {
product = document.form1.prod;
pindex = product.selectedIndex;
product_price = product.options[pindex].value;
quantity = document.form1.qty;
qindex = quantity.selectedIndex;
quantity_ordered = quantity.options[qindex].value;
document.form1.price.value = product_price*quantity_ordered;
}

</script>
</head>

<table border="0">
<tr id="header">
<td colspan="2"><h1>Moultrie Technical College<br />Worth County Campus</td>
</tr>
<tr>
<td align="right">
<script type="text/javascript">

new imageclock.display()

</script>
</td></tr>
<tr id="nav">

<td>Navigation:: <a href="index.html">Home</a> | <a href="infotech.html">Information Technology</a> |

<a href="webdesign.html">Web Design</a> | <a href="cosmo.html">Cosmetology</a> | <a

href="cal.html">Calendar</a> | <a href="comptia.html">CompTIA</a></td>

</tr>
<tr>

<td id="body">E-mail us at:
<b><script type="text/javascript">
document.write("moultrie@moultrietech.edu");
</script></b></td></tr>

<td><h2><center><u>Moultrie Tech (Worth) Shopping Cart</u></center></h2>

<table>

<table cellspacing="2">
<tr><th class="label">Product</th><th>Price</th>
<th>Quantity</th><th>Cost</th></tr>
<tr>
<td class="body">New Perspectives on Blended HTML, XHTML, and CSS, 1st Edition</td>
<td class="body"><input name="price1" id="price1" size="8" value="77.99"
tabindex="-1" readonly="readonly" />
</td>
<td class="body"><input name="qty1" id="qty1" size="8" value="0" />
</td>
<td class="body"><input name="cost1" id="cost1" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr>
<td class="body">New Perspectives on JavaScript, 1st Edition</td>
<td class="body"><input name="price2" id="price2" size="8" value="66.99"
tabindex="-1" readonly="readonly" />
</td>
<td class="body"><input name="qty2" id="qty2" size="8" value="0" />
</td>
<td class="body"><input name="cost2" id="cost2" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr>
<td class="body">New Perspectives on Macromedia Dreamweaver 8, Comprehensive, 1st Edition</td>
<td><input name="price3" id="price3" size="8" value="83.99"
tabindex="-1" readonly="readonly" /></td>
<td><input name="qty3" id="qty3" size="8" value="0" />
</td>
<td><input name="cost3" id="cost3" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr>
<td class="body">Adobe Photoshop CS4: Complete Concepts and Techniques, 1st Edition</td>
<td class="body"><input name="price4" id="price4" size="8" value="69.99"
tabindex="-1" readonly="readonly" /></td>
<td class="body"><input name="qty4" id="qty4" size="8" value="0" />
</td>
<td class="body"><input name="cost4" id="cost4" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr>
<td class="body">Miladys Standard Cosmetology 2008, 1st Edition</td>
<td class="body"><input name="price5" id="price5" size="8" value="78.99"
tabindex="-1" readonly="readonly" /></td>
<td class="body"><input name="qty5" id="qty5" size="8" value="0" />
</td>
<td class="body"><input name="cost5" id="cost5" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr>
<td class="body">Network+ Guide to Networks, 4th Edition</td>
<td class="body"><input name="price6" id="price6" size="8" value="106.95"
tabindex="-1" readonly="readonly" /></td>
<td class="body"><input name="qty6" id="qty6" size="8" value="0" />
</td>
<td class="body"><input name="cost6" id="cost6" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr><td class="body" colspan="4"> </td></tr>
<tr>
<td class="body" colspan="3">Sales Tax (5%)</td>
<td class="body"><input name="tax" id="tax" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr>
<td class="body" colspan="3">
<p><input type="radio" name="shipType" id="ship1" value="4.95" onclick="calcShipping(this)" />
<label for="ship1">Standard (4-6 business days): $4.95</label>
</p>
<p><input type="radio" name="shipType" id="ship2" value="8.95"
onclick="calcShipping(this)"/>
<label for="ship2">Express (2 days): $8.95</label>
</p>
<p><input type="radio" name="shipType" id="ship3" value="12.95"
onclick="calcsShipping(this)" />
<label for="ship3">Next Day (1 Day): $12.95</label>
</p>
</tr>
<tr>
<td class="body" colspan="3">TOTAL</td>
<td class="body"><input name="total" id="total" si
value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
</table>

</form>
</script>

<br />
<br />
<tr id="black">
<td colspan="2">1210 North Monroe Street Sylvester, GA 31791.</td>
</tr>
</table>
</div>
</body>
</html>

cart javascript shopping

Edited 14 Years Ago by Rblalock because: n/a

2 Contributors
3 Replies
446 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by Rblalock

All 3 Replies

network18 15 Practically a Master Poster

14 Years Ago

you need to call it onFocus of the each input element for the cost.
For example, user inserts quantity for first product then tabs to the next element or puts cursor inside the next element i.e. cost's box, the function should get executed with the element id passed to it and will assign the calculated cost to it.
It will be for each cost element.
In this case you will need to modify your calcPrice() function a little bit to accept it as the element id too

<td class="body"><input name="cost1" id="cost1" size="12" value="0.00"
tabindex="-1" readonly="readonly" onFocus="return calcPrice('price1','qty1');" />
</td>

Edited 14 Years Ago by network18 because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Rblalock 0 Newbie Poster · Answer 1 · 2009-11-12T20:13:20+00:00

How would I need to modify the calcPrice() function to accept it as the element id? I know this may be a noob question...as I am indeed a noob at JavaScript

Rblalock 0 Newbie Poster · Answer 2 · 2009-11-13T08:35:46+00:00

All I need to know now is how to modify the calcPrice() function which is as follows

function calcPrice() {
product = document.form1.prod;
pindex = product.selectedIndex;
product_price = product.options[pindex].value;
quantity = document.form1.qty;
qindex = quantity.selectedIndex;
quantity_ordered = quantity.options[qindex].value;
document.form1.price.value = product_price*quantity_ordered;
}

to accept the

onFocus="return calcPrice('price1','qty1');"

which would allow the prices and everything to change. I am sorry for asking all of these questions, but my teacher knows nothing about JavaScript.

Calculating Price in JavaScript

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers