/    Sign up×
Community /Pin to ProfileBookmark

form totals when the user enters the price?

Copy linkTweet thisAlerts:
May 08.2003

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?

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@JonaMay 08.2003 — 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?
Copy linkTweet thisAlerts:
@pdgguyauthorMay 08.2003 — Well those are darn good questions Jona.

The user enters a price, a quantity, and clicks on Calculate...
Copy linkTweet thisAlerts:
@JonaMay 08.2003 — 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>
Copy linkTweet thisAlerts:
@pdgguyauthorMay 08.2003 — 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>
Copy linkTweet thisAlerts:
@JonaMay 08.2003 — <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.Product_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>
Copy linkTweet thisAlerts:
@pdgguyauthorMay 08.2003 — 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.
Copy linkTweet thisAlerts:
@JonaMay 08.2003 — 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.
Copy linkTweet thisAlerts:
@pdgguyauthorMay 08.2003 — Yes, that's the best way to do it. Your code is the best first step.
×

Success!

Help @pdgguy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...