Modifying calcPrice() function in JavaScript

Question

Rblalock 0 Newbie Poster

14 Years Ago

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

function calcShipping(shipoption) {
  document.form1.ship.value = shipoption.value;
}

function calcTotal() {
  priceVal = parserFloat(document.form1.price.value);
  shipVal = parserFloat(document.form1.ship.value);
  taxval = 0.05*(priceVal+shipVal);
  document.form1.sub.value = (priceVal+shipVal).toFixed(2);
  document.form1.tax.value = (taxVal).toFized(2);
  document.form1.tot.value = (priceVal+shipVal+taxVal).toFixed(2);
}

</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="ShoppingCart.htm">Shopping Cart</a> | <a href="welding.html">Welding</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 id="body"><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 id="text" id="date" name="date" size="11" value="mm-dd-yyyy" 
    tabindex="-1" readonly="readonly" /></td>
</p>

<table cellspacing="2">
<tr><th id="label">Product</th><th>Price</th>
    <th>Quantity</th><th>Cost</th></tr>
<tr>
   <td id="body" onchange="calcPrice()">New Perspectives on Blended HTML, XHTML, and CSS, 1st Edition</td>
   <td id="body"><input name="price1" id="price1" size="8" value="77.99" 
        tabindex="-1" readonly="readonly" onFocus="return calcPrice('price1','qty1');" />
   </td>
   <td id="body"><input name="qty1" id="qty1" size="8" value="0" />
   </td>
   <td id="body"><input name="cost1" id="cost1" size="12" value="0.00" 
        tabindex="-1" readonly="readonly" onFocus="return calcPrice('price1','qty1');" />
   </td>
</tr>
<tr>
   <td id="body" onchange="calcPrice()">New Perspectives on JavaScript, 1st Edition</td>
   <td id="body"><input name="price2" id="price2" size="8" value="66.99" 
        tabindex="-1" readonly="readonly" />
   </td>
   <td id="body"><input name="qty2" id="qty2" size="8" value="0" />
   </td>
   <td id="body"><input name="cost2" id="cost2" size="12" value="0.00" 
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
<tr>
   <td id="body" onchange="calcPrice()">New Perspectives on Macromedia Dreamweaver 8, Comprehensive, 1st 

Edition</td>
   <td id="body"><input name="price3" id="price3" size="8" value="83.99" 
        tabindex="-1" readonly="readonly" /></td>
   <td id="body"><input name="qty3" id="qty3" size="8" value="0" />
   </td>
   <td id="body"><input name="cost3" id="cost3" size="12" value="0.00" 
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
<tr>
   <td id="body" onchange="calcPrice()">Adobe Photoshop CS4: Complete Concepts and Techniques, 1st 

Edition</td>
   <td id="body"><input name="price4" id="price4" size="8" value="69.99" 
        tabindex="-1" readonly="readonly" /></td>
   <td id="body"><input name="qty4" id="qty4" size="8" value="0" />
   </td>
   <td id="body"><input name="cost4" id="cost4" size="12" value="0.00" 
        tabindex="-1" readonly="readonly" />
   </td>
   </tr>
<tr>
   <td id="body" onchange="calcPrice()">Miladys Standard Cosmetology 2008, 1st Edition</td>
   <td id="body"><input name="price5" id="price5" size="8" value="78.99" 
        tabindex="-1" readonly="readonly" /></td>
   <td id="body"><input name="qty5" id="qty5" size="8" value="0" />
   </td>
   <td id="body"><input name="cost5" id="cost5" size="12" value="0.00" 
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
<tr>
   <td id="body" onchange="calcPrice()">Network+ Guide to Networks, 4th Edition</td>
   <td id="body"><input name="price6" id="price6" size="8" value="106.95" 
        tabindex="-1" readonly="readonly" /></td>
   <td id="body"><input name="qty6" id="qty6" size="8" value="0" />
   </td>
   <td id="body"><input name="cost6" id="cost6" size="12" value="0.00" 
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
<tr><td id="body" colspan="4">&nbsp;</td></tr>
<tr>
   <td id="body" colspan="3">Sales Tax (5%)</td>
   <td id="body"><input name="tax" id="tax" size="12" value="0.00" 
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
<tr>
   <td id="body" colspan="4">
     <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 id="body" colspan="3">TOTAL</td>
   <td id="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>

How would I change the

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

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

element id too.

javascript

2 Contributors
8 Replies
216 Views
3 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Rblalock

All 8 Replies

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Rblalock,

In my experience, the best approach for form calculations of this type is to have a single (or supervisor) function which performs all calcs throughout the whole form (spreadsheet-fashion), and to call this function from a variety of event handlers (including window.onload).

The calc function would look something like this:

function calc(){
	var i, p, q, taxVal=0, shipVal=0, runningTotal=0;
	for(i=1; i<=6; i++){
		p = document.form1['price'+i].value;
		q = document.form1['qty'+i].value;
		document.form1['cost'+i].value = (p * q).toFixed(2);
		runningTotal += parseFloat(document.form1['cost'+i].value);
	}
	document.form1.tax.value = (taxRate * runningTotal).toFixed(2);
	taxVal = parseFloat(document.form1.tax.value);
	if(runningTotal > 0){
		for(i=1; i<=3; i++ ){
			var s = document.getElementById('ship'+i);
			if(s.checked){ shipVal = parseFloat(s.value); }
		}
	}
	document.form1.total.value = (runningTotal + taxVal + shipVal).toFixed(2);
}

NOTES:

Define taxRate in a "data" block rather than burying it in a function.
Serve the page with the correct value for numItems and keep it up to date with any additions/deletions.
Serve the page with one of the shipping options (the cheapest) checked by default to ensure that the user cannot not submit the form without selecting one.
A number of changes to the HTML would also be required. In particular, each row needs its own element names (price1, qty1, cost1; price2, qty2, cost2 etc.)

Airshow

Edited 14 Years Ago by Airshow because: n/a

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Rblalock,

OK, a fully worked up version of your page is attached, complete with my calc() function and several events to stimulate it.

You will find exactly the same approach used here though the html is largely invisible (added dynamically by JavaScript DOM methods).

Airshow

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with x-rar files.

cart_calc.zip (2.84 KB)

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-16T03:23:38+00:00

Rblalock,
In my experience, the best approach for form calculations of this type is to have a single (or supervisor) function which performs all calcs throughout the whole form (spreadsheet-fashion), and to call this function from a variety of event handlers (including window.onload).
The calc function would look something like this:
function calc(){
	var i, p, q, taxVal=0, shipVal=0, runningTotal=0;
	for(i=1; i<=6; i++){
		p = document.form1['price'+i].value;
		q = document.form1['qty'+i].value;
		document.form1['cost'+i].value = (p * q).toFixed(2);
		runningTotal += parseFloat(document.form1['cost'+i].value);
	}
	document.form1.tax.value = (taxRate * runningTotal).toFixed(2);
	taxVal = parseFloat(document.form1.tax.value);
	if(runningTotal > 0){
		for(i=1; i<=3; i++ ){
			var s = document.getElementById('ship'+i);
			if(s.checked){ shipVal = parseFloat(s.value); }
		}
	}
	document.form1.total.value = (runningTotal + taxVal + shipVal).toFixed(2);
}
NOTES:
Define taxRate in a "data" block rather than burying it in a function.

Serve the page with the correct value for numItems and keep it up to date with any additions/deletions.

Serve the page with one of the shipping options (the cheapest) checked by default to ensure that the user cannot not submit the form without selecting one.

A number of changes to the HTML would also be required. In particular, each row needs its own element names (price1, qty1, cost1; price2, qty2, cost2 etc.)

Airshow

Would you mind showing me an example of changing each row that needs its own element names? I know this is really stupid to ask, but I am rather new at all of this.

Rblalock 0 Newbie Poster · Answer 2 · 2009-11-16T04:13:55+00:00

Won't let me open up the zip file. Says that it is invalid or corrupted.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2009-11-16T04:43:18+00:00

It was made with winrar and I changed the extension from .rar to .zip, which is normally OK. Try changing your local copy back to .rar and see if it that's any better. If not then I'll post the contents in direct in the thread.

Airshow

Rblalock 0 Newbie Poster · Answer 4 · 2009-11-16T04:45:34+00:00

It's still not opening for me which sucks. I do appreciate you being so generous by helping a noob like me. Thank you lots.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 5 · 2009-11-16T05:48:32+00:00

OK, here it is in "longhand".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Moultrie Technical College - Worth County Campus</title>
<style type="text/css" media="all">
body {
	background: transparent url(images/bg.gif) repeat left top; }
h1 {
	width: 775px;
	height: 125px;
	margin-bottom: 0;
	border-bottom: groove thick;
	background-image: url(logo.png);
	background-repeat: no-repeat;
	font-size: 20pt;
	font-family: "bernhardmod BT",serif;
	text-align: center;
}
h2 {
	margin: 0;
	text-align: center;
	text-decoration: underline;
}
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;
}
.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;
}
td.cost {
	text-align: right;
}
input.val {
	padding-right: 10px;
	text-align: right;
}
#pbuttons {
	text-align: center;
}
</style>

<script type="text/javascript">
var imageclock = {};
//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") { sections[0] = "12"; } //If hour field is 0 (aka 12 AM)
	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">
// Data
var numItems = 6;
var taxRate = 0.05;

// Functions
function calc(){
	var i, p, q, taxVal=0, shipVal=0, runningTotal=0;
	for(i=1; i<=6; i++){
		p = document.form1['price'+i].value;
		q = document.form1['qty'+i].value;
		document.form1['cost'+i].value = (p * q).toFixed(2);
		runningTotal += parseFloat(document.form1['cost'+i].value);
	}
	document.form1.tax.value = (taxRate * runningTotal).toFixed(2);
	taxVal = parseFloat(document.form1.tax.value);
	if(runningTotal > 0){
		for(i=1; i<=3; i++ ){
			var s = document.getElementById('ship'+i);
			if(s.checked){
				shipVal = parseFloat(s.value);
				document.form1['shipping'].value = shipVal;
			}
		}
	}
	document.form1.total.value = (runningTotal + taxVal + shipVal).toFixed(2);
}

onload = function(){
	document.form1.date.value = todayTxt();
	calc();
}
</script>
</head>

<body>

<div class="center">

<table border="0">
<tr id="header">
<td colspan="2"><h1>Moultrie Technical College<br />Worth County Campus</h1></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="ShoppingCart.htm">Shopping Cart</a> | <a href="welding.html">Welding</a> | <a href="comptia.html">CompTIA</a></td>
</tr><tr>
<td class="body">E-mail us at:&nbsp;<b><script type="text/javascript">document.write("moultrie@moultrietech.edu");</script></b></td>
</tr><tr>
<td class="body"><h2>Moultrie Tech (Worth) Shopping Cart</h2></td>
</tr>
<table>

<form name="form1" method="post" onsubmit="return checkForm1()" onreset="location.reload()">
<p id="datep"><input id="text" id="date" name="date" size="11" value="mm-dd-yyyy" tabindex="-1" readonly="readonly" /></p>

<table cellspacing="2">
<tr>
<th id="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 class="val" name="price1" id="price1" size="8" value="77.99" tabindex="-1" readonly="readonly" /></td>
<td class="body"><input class="val" name="qty1" id="qty1" size="8" value="0" onblur="calc();" /></td>
<td class="body cost"><input class="val" 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 class="val" name="price2" id="price2" size="8" value="66.99" tabindex="-1" readonly="readonly" /></td>
<td class="body"><input class="val" name="qty2" id="qty2" size="8" value="0" onblur="calc();" /></td>
<td class="body cost"><input class="val" 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 class="body"><input class="val" name="price3" id="price3" size="8" value="83.99" tabindex="-1" readonly="readonly" /></td>
<td class="body"><input class="val" name="qty3" id="qty3" size="8" value="0" onblur="calc();" /></td>
<td class="body cost"><input class="val" 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 class="val" name="price4" id="price4" size="8" value="69.99" tabindex="-1" readonly="readonly" /></td>
<td class="body"><input class="val" name="qty4" id="qty4" size="8" value="0" onblur="calc();" /></td>
<td class="body cost"><input class="val" 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 class="val" name="price5" id="price5" size="8" value="78.99" tabindex="-1" readonly="readonly" /></td>
<td class="body"><input class="val" name="qty5" id="qty5" size="8" value="0" onblur="calc();" /></td>
<td class="body cost"><input class="val" 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 class="val" name="price6" id="price6" size="8" value="106.95" tabindex="-1" readonly="readonly" /></td>
<td class="body"><input class="val" name="qty6" id="qty6" size="8" value="0" onblur="calc();" /></td>
<td class="body cost"><input class="val" 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 cost" center><input class="val" name="tax" id="tax" size="12" value="0.00" tabindex="-1" readonly="readonly" /></td>
</tr><tr>
<td class="body" colspan="3">
<input class="val" type="radio" name="shipType" id="ship1" value="4.95"  onclick="calc()" checked="checked" /><label for="ship1">Standard (4-6 business days) : $4.95</label><br />
<input class="val" type="radio" name="shipType" id="ship2" value="8.95"  onclick="calc()"/><label for="ship2">Express (2 days) : $8.95</label><br />
<input class="val" type="radio" name="shipType" id="ship3" value="12.95" onclick="calc()" /><label for="ship3">Next Day (1 Day) : $12.95</label>
</td>
<td class="body cost"><input class="val" name="shipping" size="12" value="0.00" readonly="readonly" /></td>
</tr><tr>
<td class="body" colspan="3">TOTAL</td>
<td class="body cost"><input class="val" name="total" id="total" value="0.00" tabindex="-1" readonly="readonly" />
</td>
</tr>
</table>
<p id="pbuttons"><input class="val" type="reset" value="Reset" /> <input type="submit" value="Submit Order" /></p>
<br />
<br />
1210 North Monroe Street Sylvester, GA 31791.
</div>
</form>

</body>
</html>

Airshow

Rblalock 0 Newbie Poster · Answer 6 · 2009-11-17T03:13:51+00:00

Airshow,

Thank you so much for helping me with this confusing aspect of web design/development. I appreciate the entirety of your help and I am not sure how I can repay you. I cannot express enough thanks to you for helping me with this. Thank you!!!

Modifying calcPrice() function in JavaScript

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers