 |
 |
|
||||||||
|
||||||||
09-04-2008, 04:40 PM
|
#1 |
|
New Member
 
Join Date: Sep 2008
Posts: 6
|
Best way to calculate form fields???
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. |
|
|
|
09-05-2008, 12:12 AM
|
#2 |
|
Super Moderator
 
Join Date: Jun 2008
Posts: 493
|
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).
|
|
|
|
|
09-05-2008, 04:07 AM
|
#3 |
|
Bronze Member
 Join Date: Aug 2008
Location: Dallas, Tx
Posts: 82
|
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. |
|
|
|
|
09-05-2008, 03:42 PM
|
#4 |
|
New Member
Join Date: Sep 2008
Posts: 6
|
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> 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);
}
Code:
var a = document.form1.field1.value var b = document.form1.field2.value c = a*b return c Thanks foy your help. Last edited by davncong; 09-30-2008 at 04:51 PM. Reason: modify |
|
|
|
|
09-05-2008, 06:23 PM
|
#5 |
|
Bronze Member
Join Date: Aug 2008
Location: Dallas, Tx
Posts: 82
|
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>
|
|
|
|
|
09-09-2008, 12:57 AM
|
#6 |
|
New Member
Join Date: Sep 2008
Posts: 6
|
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>
 )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 |
|
|
|
|
09-09-2008, 02:12 AM
|
#7 |
|
Bronze Member
Join Date: Aug 2008
Location: Erie, PA
Posts: 49
|
Use AJAX! Way better!
|
|
|
|
|
09-09-2008, 03:33 AM
|
#8 |
|
Bronze Member
Join Date: Aug 2008
Location: Dallas, Tx
Posts: 82
|
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. |
|
|
|
|
09-09-2008, 03:46 AM
|
#9 | |
|
Bronze Member
Join Date: Aug 2008
Location: Erie, PA
Posts: 49
|
Quote:
joe.....it may not be needed in this instance, but AJAX could certainly make it much better. |
|
|
|
|
|
09-09-2008, 11:38 AM
|
#10 |
|
Bronze Member
Join Date: Aug 2008
Location: Dallas, Tx
Posts: 82
|
care to explain?
|
|
|
|
 |
| Thread Tools | |
| Display Modes | |
|
|
Linear Mode
