Member Avatar for Rblalock

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>

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

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

Edited by Rblalock because: n/a
  • 2 Contributors
  • 3 Replies
  • 457 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Rblalock
Member Avatar for network18

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 by network18 because: n/a
Member Avatar for Rblalock

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

Member Avatar for Rblalock

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.

Edited by Rblalock because: n/a
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.