Click to See Complete Forum and Search --> : form totals when the user enters the price?


pdgguy
05-08-2003, 08:07 AM
I've seen a lot of basic "calculate" order form totals with javascript, but I need to have one work where the user actually enters the price for each item and then clicks on "calculate". Is there a script that would allow me to pull this off?

Jona
05-08-2003, 11:04 AM
Yes, there is. Do you want the user to enter a price for the product? Or a quantity for the product? And have the price autoamatically calculate, rather than the user clicking a button?

pdgguy
05-08-2003, 11:50 AM
Well those are darn good questions Jona.
The user enters a price, a quantity, and clicks on Calculate...

Jona
05-08-2003, 12:00 PM
function calculate(quantity, price){
document.myForm.myTotalTextBox.value="$"+parseFloat(quantity*price);
}

In the form:

<form name="myForm">
Quantity: <input type=text name="qty"><br>
Price (per each): <input type=text name="price" onkeydown="calculate(this.form.qty, this)" onkeyup="calculate(this.form.qty, this)"><br>
Total: <input type=text name="myTotalTextBox">
</form>

pdgguy
05-08-2003, 12:16 PM
I don't think that will work for more than one product. Here's some sample code to illustrate:

<form name="myForm">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Product 1</td>
<td><input type="text" name="Product_1_Qty" size="20"></td>
<td><input type="text" name="Product_1_Price" size="20"></td>
</tr>
<tr>
<td>Product 2</td>
<td><input type="text" name="Product_2_Qty" size="20"></td>
<td><input type="text" name="Product_2_Price" size="20"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Calculate" onClick="TotalmyForm()"></td>
<td><input name="Total" type="text" size="10" OnChange="Total(this.form)"></td>
</tr>
</table>
</form>

Jona
05-08-2003, 12:40 PM
<script>
function TotalmyForm(f){
f.Total.value="$"+(parseFloat(f.Product_1_Qty.value*f.Product_1_Price.value)+parseFloat(f.Product_2_Qty.value*f.Produ ct_2_Price.value));
}
</script>
<form name="myForm">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Product 1</td>
<td><input type="text" name="Product_1_Qty" size="20"></td>
<td><input type="text" name="Product_1_Price" size="20"></td>
</tr>
<tr>
<td>Product 2</td>
<td><input type="text" name="Product_2_Qty" size="20"></td>
<td><input type="text" name="Product_2_Price" size="20"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Calculate" onClick="TotalmyForm(this.form)"></td>
<td><input name="Total" type="text" size="10"></td>
</tr>
</table>
</form>

pdgguy
05-08-2003, 02:07 PM
That's the ticket. It would be nice to have it set up to handle 20 or 30 products, it would certainly make for a long function line in the script as is...
Thanks for all your help.

Jona
05-08-2003, 02:12 PM
Then you'd use a dynamic function... To search through all of the text boxes and add them up, etc., etc. It's not that hard.

pdgguy
05-08-2003, 02:25 PM
Yes, that's the best way to do it. Your code is the best first step.