Calculating Price in JavaScript

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Nov 2009
Posts: 12
Reputation: Rblalock is an unknown quantity at this point 
Solved Threads: 0
Rblalock Rblalock is offline Offline
Newbie Poster

Calculating Price in JavaScript

 
0
  #1
Nov 11th, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2009
Posts: 557
Reputation: network18 is an unknown quantity at this point 
Solved Threads: 64
network18 network18 is offline Offline
Posting Pro
 
0
  #2
Nov 12th, 2009
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.
"The discipline of writing something down is the first step towards making it happen."

follow me on twitter
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2009
Posts: 12
Reputation: Rblalock is an unknown quantity at this point 
Solved Threads: 0
Rblalock Rblalock is offline Offline
Newbie Poster
 
0
  #3
Nov 12th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2009
Posts: 12
Reputation: Rblalock is an unknown quantity at this point 
Solved Threads: 0
Rblalock Rblalock is offline Offline
Newbie Poster
 
0
  #4
Nov 12th, 2009
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.
Reply With Quote Quick reply to this message  
Reply

Tags
•
•
•
•
Tags
cart, javascript, shopping

Quick Reply to Thread
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 748 | Replies: 3
Thread Tools Search this Thread



Tag cloud for cart, javascript, shopping
.net 2.0 3d adobe adobeacrobat ajax ajaxcode ajaxhelp api asp asp.net automatically box brands c# cart close codeinjection computers consumer createrange() decimal design dom ebay ecommerce element email epilepsy events explorer file firefox flash focus forgery form frameworks furniture getselection gifts google griefers gwt hackers highlightedword holiday holidays html htmlform iframe images internet java javascript jquery jsp link linksexchanges logfiles loop maps masterpage microsoft mp4 mysql news online parse pdf php problem regex safari scriptlets scroll security select seo session shopping size software spending tables text textbox treeview unicode validation variables vulnerability w3c web webservice window windowofwords windowsxp xml zeroday
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC