Best way to calculate form fields???

davncong

New Member
I have a simple form that is used to submit catalog orders. The user enters an item #, description, quantity & price from a catalog. The item # and description are not relevant here, but I want to multiply the quantity by the price to give an item (row) total, then sub-total the item totals (column), calculate sales tax (8%), add $5 shipping charge and give a grand total. I figured it would be easier with a static table then a dynamic table, so I created one with 10 rows (should be sufficient 99% of the time).

I tried using JavaScript but could only find examples where the price was set (usually used a checkbox or dropdown quantity box then multiplied that by a set price), but I haven't been able to get it to work using a textbox for the price. I currently am using a text box for the quantity, but I could change that to a dropdown value if that makes it easier.

I don't do this professionally, I am just creating a site for my wife to accept catalog orders online. I don't have a lot of programming knowledge, but I created a CSS site and have been learning a few programming languages.

To make a short story long, what would be the best language to accomplish this? I'd prefer to have the form autosum, but I haven't ruled out a calculate button yet.
 

jnjc

New Member
I think you would be best to us Javascript for this, can you post the page as it is now and we can have a look at how far you've gotten (from what you are describing you seem pretty close).
 

joe

New Member
write a function in javascipt that when called takes the value from both forms, multiplies them and returns the answer. something to the effect of: var a = document.form1.field1.value var b = document.form1.field2.value c = a*b return c
(where form1 is the name of your form and field1 & field2 are the names of your input boxes) I'm not the best at writing correct javascript on the fly, but this should give you an idea of what you'll need to do. You can set it to an event such as onchange or onsubmit to trigger the function if you'd like.
 

davncong

New Member
As for the script, I've never written a script completely from scratch, so I've tried to modify other scripts available. Most involve set prices though, such as

Code:
<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" />
Wonder Widget
$<span id="txtPrice0">10</span>
<select id="sel0">
	<option value="val0">0</option>
	<option value="val1">1</option>
	<option value="val2">2</option>
	<option value="val3">3</option>
</select>
</p>
<p>
<input type="checkbox" id="chk1" />
Snow Widget
$<span id="txtPrice1">20</span>
<select id="sel1">
	<option value="val0">0</option>
	<option value="val1">1</option>
	<option value="val2">2</option>
</select>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>

or very simple autosum functions such as

Code:
function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){
  one = document.autoSumForm.firstBox.value;
  two = document.autoSumForm.secondBox.value; 
  document.autoSumForm.thirdBox.value = (one * 1) + (two * 1);
}
function stopCalc(){
  clearInterval(interval);
}

that I tried to modify to what I needed (with only limited success). I'll try the
Code:
 var a = document.form1.field1.value var b = document.form1.field2.value c = a*b return c
and see if I can get that to work.


Thanks foy your help.
 
Last edited:

joe

New Member
Very basic, but it works. You should be able to manipulate it to do what you need.


Code:
<html>
<head>
<script type="text/javascript">
function totalprice()
{
a = document.form1.quantity.value
b = document.form1.price.value
 
c = a * b
 
document.form1.total.value = c
}
</script>
 
 
</head>
<body>
<form action="here.php" method="post" name="form1">
Quantity: <input name="quantity" size="10">Price: <input name="price" size="10" onblur="totalprice();"><br>
Total: <input name="total" size="10" readonly=true><br>
<input type="submit" value="Submit">
</form>
 
</body>
</html>
 

davncong

New Member
Thanks Joe. I took what you gave me and modified it to this.

Code:
 <script type="text/javascript">
<!--

function totalprice10()
{
// Item 1
a = document.form1.quantity1.value
b = document.form1.price1.value
 
c = a * b
 
document.form1.total1.value = c.toFixed(2)

// Item 2
d = document.form1.quantity2.value
e = document.form1.price2.value
 
f = d * e
 
document.form1.total2.value = f.toFixed(2)

// Item 3
g = document.form1.quantity3.value
h = document.form1.price3.value
 
i = g * h
 
document.form1.total3.value = i.toFixed(2)

// Item 4
j = document.form1.quantity4.value
k = document.form1.price4.value
 
l = j * k
 
document.form1.total4.value = l.toFixed(2)

// Item 5
m = document.form1.quantity5.value
n = document.form1.price5.value
 
o = m * n
 
document.form1.total5.value = o.toFixed(2)

// Item 6
p = document.form1.quantity6.value
q = document.form1.price6.value
 
r = p * q
 
document.form1.total6.value = r.toFixed(2)

// Item 7
s = document.form1.quantity7.value
t = document.form1.price7.value
 
u = s * t
 
document.form1.total7.value = u.toFixed(2)

// Item 8
v = document.form1.quantity8.value
w = document.form1.price8.value
 
x = v * w
 
document.form1.total8.value = x.toFixed(2)

// Item 9
y = document.form1.quantity9.value
z = document.form1.price9.value
 
aa = y * z
 
document.form1.total9.value = aa.toFixed(2)

// Item 10
bb = document.form1.quantity10.value
cc = document.form1.price10.value
 
dd = bb * cc
 
document.form1.total10.value = dd.toFixed(2)

// Sub-Total
ee = document.form1.subtotal.value
cc = document.form1.price10.value
 
ee = c + f + i + l + o + r + u + x + aa + dd
 
document.form1.subtotal.value = ee.toFixed(2)

// Tax
ff = ee * .08
 
document.form1.tax.value = ff.toFixed(2)

//Total
gg = ee + ff

document.form1.grandtotal.value = gg.toFixed(2)

}
//-->
</script>

You can see I used basic commands to sum the totals (since thats all I know :))

I added the .toFixed(2) to the script, which seems to round the numbers properly, but I'm not sure if that was the best way to do it. The other methods all seemed to involve lengthy scripts and I could never get them to run properly.

Anyone know if there are problems using .toFixed() method? Fortunetly for me, the data is not being sent to a server. The results are just being emailed for an order to be submitted, so slight errors with the calculations won't cause failures.

David
 

joe

New Member
Looks good. Don't worry about the tofixed(). If it works then don't worry about it.


ab.....don't use something that's not needed. He didn't need ajax for this.
 

abwebdesign

New Member
Looks good. Don't worry about the tofixed(). If it works then don't worry about it.


ab.....don't use something that's not needed. He didn't need ajax for this.


joe.....it may not be needed in this instance, but AJAX could certainly make it much better.
 

chrism

New Member
what a great script, endless potential, thank you!

i've been looking at this script and trying to incorporate in into a simple internal purchase order request, with some success, mainly not.

quesitons i have are:

1)How can i make the delivery field default to 0.00 but if the user knows the delivery cost they can enter it.

2) VAT (UK tax) is calculated when all the subtotals are added together, so vat on delivery maybe nothing if it was kept at 0.00 or on the sum added im guessing i just need to tweak the totals area of the script to work it out this way?

3) Some users have the habit of pressing enter which if they have part completed the form sends the form, can this be disabled?

thanks in advance of any replies.
 

davncong

New Member
This script calculates shipping as a % of the sub-total. You can remove that from the script and add value="0" to the shipping formfield to set the default to 0. The user will still be able to change the shipping value, if needed.

Our shipping is not taxed, so the shipping field is not included it the tax calculation. Make sure you change the script to add that field or your tax will not be calculated correctly.

That should take care of

1)How can i make the delivery field default to 0.00 but if the user knows the delivery cost they can enter it.

2) VAT (UK tax) is calculated when all the subtotals are added together, so vat on delivery maybe nothing if it was kept at 0.00 or on the sum added im guessing i just need to tweak the totals area of the script to work it out this way?

As for
3) Some users have the habit of pressing enter which if they have part completed the form sends the form, can this be disabled?

I'm not sure how to do #3 yet, but that would probably be a good safeguard to add.
 

dellvostro

New Member
mod this form to remove quantity

Im looking for a form to calculate 20 rows of data. There will be no quantity, I just need to be able to fill in listed prices, have it total. The visitor can remove prices from fields and i need to have the total reflect this deduction.
Basically just 2 rows of data. desciption and cost. at bottom a totals and send button. The form info would need to be submitted to an email address.

Can anyone help with this? I think the attached code from an earlier post would be best, but need it slightly modified to fit my needs. Thanks for any help.

Code:
<html>
<head>
<script type="text/javascript">
function totalprice()
{
a = document.form1.quantity.value
b = document.form1.price.value
 
c = a * b
 
document.form1.total.value = c
}
</script>
 
 
</head>
<body>
<form action="here.php" method="post" name="form1">
Quantity: <input name="quantity" size="10">Price: <input name="price" size="10" onblur="totalprice();"><br>
Total: <input name="total" size="10" readonly=true><br>
<input type="submit" value="Submit">
</form>
 
</body>
</html>
 
Top