943,985 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Calculating Price in JavaScript
Ad:
Permalink
Nov 11th, 2009
0

Calculating Price in JavaScript

Expand Post »
I need help understand where to place (and how to create)
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function calcPrice() {
  2.   product = document.form1.prod;
  3.   pindex = product.selectedIndex;
  4.   product_price = product.options[pindex].value;
  5.   quantity = document.form1.qty;
  6.   qindex = quantity.selectedIndex;
  7.   quantity_ordered = quantity.options[qindex].value;
  8.   document.form1.price.value = product_price*quantity_ordered;
  9. }
. I also need to know where to add the
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. onchange = "calcPrice()"
event handler. I will post my coding below, please help.

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

<style type="text/css" media="all">

/* 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>

<script type="text/javascript">

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[i]=new Image()
preloadimages[i].src=imageclock.digits[i]
}

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[i].length==1)
sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img

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

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

src="'+imageclock.digits[parseInt(sections[i].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>

<script type="text/javascript">

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>

<body onload="startForm()">
<form name="form1" method="post"
onsubmit="return checkForm1()" onreset="location.reload()">
<div class="center">

<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>

<form name="orders" id="orders" method="post" action="done.htm">

<p id="datep">
<input class="text" id="date" name="date" size="11" value="mm-dd-yyyy"
tabindex="-1" readonly="readonly" /></td>
</p>

<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">&nbsp;</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>

<p id="pbuttons"><center>
<input type="reset" value="Reset" />
<input type="submit" value="Submit Order" />
</center></p>

</form>
</script>

<br />
<br />
<tr id="black">
<td colspan="2">1210 North Monroe Street Sylvester, GA 31791.</td>
</tr>
</table>
</div>
</body>
</html>
Last edited by Rblalock; Nov 11th, 2009 at 9:18 pm.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Rblalock is offline Offline
12 posts
since Nov 2009
Permalink
Nov 12th, 2009
0
Re: Calculating Price in JavaScript
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
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <td class="body"><input name="cost1" id="cost1" size="12" value="0.00"
  2. tabindex="-1" readonly="readonly" onFocus="return calcPrice('price1','qty1');" />
  3. </td>
Last edited by network18; Nov 12th, 2009 at 3:37 am.
Reputation Points: 29
Solved Threads: 76
Practically a Master Poster
network18 is offline Offline
616 posts
since Sep 2009
Permalink
Nov 12th, 2009
0
Re: Calculating Price in JavaScript
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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Rblalock is offline Offline
12 posts
since Nov 2009
Permalink
Nov 12th, 2009
0
Re: Calculating Price in JavaScript
All I need to know now is how to modify the calcPrice() function which is as follows
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function calcPrice() {
  2. product = document.form1.prod;
  3. pindex = product.selectedIndex;
  4. product_price = product.options[pindex].value;
  5. quantity = document.form1.qty;
  6. qindex = quantity.selectedIndex;
  7. quantity_ordered = quantity.options[qindex].value;
  8. document.form1.price.value = product_price*quantity_ordered;
  9. }
to accept the
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. 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.
Last edited by Rblalock; Nov 12th, 2009 at 10:37 pm.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Rblalock is offline Offline
12 posts
since Nov 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: sending ajax response form struts2 action class
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: javascript in mozilla firefox


Tags
cart, javascript, shopping



About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC