Solved

Need for to calculate "Quantity" * "Unit Cost" = "Total Cost"

Posted on 2002-07-11
15
534 Views
Last Modified: 2008-03-17
Can anyone come up with a script which does the following:

The form would have 3 fields, namely Quantity, Unit Cost, and Total Cost.

Quantity and Unit Cost would both be dropdown menus, and Total Cost would be calculated based on the selections made in Quantity and Unit Cost.

In other words, I am trying to calculate:

"Quantity" * "Unit Cost" = "Total Cost"

But, there are a couple of tricks...

1. I would like Total Cost to be calculated, not by clicking a "Calculation" button, but when the user selects an option from the "Unit Cost" field.

2. The name for "Total Cost" should be a3, so:

Total Cost <input name="a3" value="...

3. Can you display Total Cost so that is also conatins $ i.e., $10.50.

Your help is much appreciated!


0
Comment
Question by:lserrano
  • 5
  • 4
  • 3
  • +2
15 Comments
 
LVL 12

Expert Comment

by:ahosang
ID: 7146685
Try this:

<html>
<head>
<script>
function calculate(f) {
  var num=f.quantity.options[f.quantity.options.selectedIndex].value*1;
  var cost=f.unit.options[f.unit.options.selectedIndex].value*1;
  f.a3.value="$"+num*cost;
}
</script>
</head>

<body>
<form>
<select name="quantity" onchange="calculate(this.form)">
<option value="1">1</option>
<option value="2">2</option>
<option value="5">5</option>
</select>

<select name="unit" onchange="calculate(this.form)">
<option value="5">$5</option>
<option value="10">$10</option>
<option value="20">$20</option>
</select><br>
<input type="text" name="a3" id="a3" value="$">
</form>
</body>
</html>
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7146803
<html>
<head>
<script>
function calculate(f)
{
var num=parseInt(f.quantity.options[f.quantity.options.selectedIndex].value);
var cost=parseInt(f.unit.options[f.unit.options.selectedIndex].value);
f.a3.value="$"+(num*cost)/100;
}
</script>
</head>

<body>
<form>
<select name="quantity" onchange="calculate(this.form)">
<option value="1">1</option>
<option value="2">2</option>
<option value="5">5</option>
</select>

<select name="unit" onchange="calculate(this.form)">
<option value="500">$5.00</option>
<option value="1035">$10.35</option>
<option value="2095">$20.95</option>
</select><br>
<input type="text" name="a3" id="a3" value="$">
</form>

</body>
</html>

Cd&
0
 
LVL 10

Expert Comment

by:zvonko
ID: 7146826
And here is mine:
<html>
<head>
<script>
function reCalc() {
 var Q1 = document.all.Q1;
 var P1 = document.all.P1;
 var a3 = document.all.a3;
 a3.value=Math.round(Q1.options[Q1.selectedIndex].value*P1.options[P1.selectedIndex].value*100)/100;
 a3f=(a3.value+'.').split('.');
 a3.value='$'+a3f[0]+'.'+(a3f[1]+'00').substr(0,2);
}
</script>
</head>
<body>
<form id=myForm>
<table>
<tr>
<td>
<select id=Q1 onChange="reCalc()">
<option value="1">1
<option value="2" selected>2
<option value="3">3
<option value="4">4
<option value="5">5
</select>
</td>
<td>
<select name=P1 onChange="reCalc()">
<option value="10.5" selected>$10.50
<option value="20.25">$20.25
<option value="30.35">$30.35
<option value="40.45">$40.45
<option value="50.55">$50.55
</select>
</td>
<td>
<input type=text name=a3 onFocus="this.blur()">
</td>
</tr>
</table>
</form>
</body>
</html>


<|:-)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7147045
which is IE only...

Cd&
0
 
LVL 10

Expert Comment

by:zvonko
ID: 7147184
Then take this:)
<html>
<head>
<script>
function reCalc() {
 var Q1 = document.forms[0].Q1;
 var P1 = document.forms[0].P1;
 var a3 = document.forms[0].a3;
 a3.value=Math.round(Q1.options[Q1.selectedIndex].value*P1.options[P1.selectedIndex].value*100)/100;
 a3f=(a3.value+'.').split('.');
 a3.value='$'+a3f[0]+'.'+(a3f[1]+'00').substr(0,2);
}
</script>
</head>
<body onLoad="reCalc()">
<form>
<table>
<tr>
<th>Quantity</th>
<th>Unit Cost</th>
<th>Total Cost</th>
</tr>
<tr>
<td>
<select id=Q1 onChange="reCalc()">
<option value="1">1
<option value="2" selected>2
<option value="3">3
<option value="4">4
<option value="5">5
</select>
</td>
<td>
<select name=P1 onChange="reCalc()">
<option value="10.5" selected>$10.50
<option value="20.25">$20.25
<option value="30.35">$30.35
<option value="40.45">$40.45
<option value="50.55">$50.55
</select>
</td>
<td>
<input type=text name=a3 size=10 onFocus="this.blur()">
</td>
</tr>
</table>
</b>
</form>
</body>
</html>

0
 

Author Comment

by:lserrano
ID: 7147841
Amazing!

Okay, just one catch...

The values for Q1 need to appear as:

<select id=Q1 onChange="reCalc()">
<option value="1 widget">1
<option value="2 widget" selected>2
<option value="3 widget">3
<option value="4 widget">4
<option value="5 widget">5

rather than:
 
<select id=Q1 onChange="reCalc()">
<option value="1">1
<option value="2" selected>2
<option value="3">3
<option value="4">4
<option value="5">5

Many thanks!
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7148324
<offtopic>

so many solutions!

>> Many thanks!
now since you've found what you want, please award the Q to some one.

</offtopic>
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 10

Expert Comment

by:zvonko
ID: 7148358
What about this one:
<html>
<head>
<script>
function reCalc() {
var Q1 = document.forms[0].Q1;
var P1 = document.forms[0].P1;
var a3 = document.forms[0].a3;
a3.value=Math.round(Q1.options[Q1.selectedIndex].value*P1.options[P1.selectedIndex].value*100)/100;
a3f=(a3.value+'.').split('.');
a3.value='$'+a3f[0]+'.'+(a3f[1]+'00').substr(0,2);
}
</script>
</head>
<body onLoad="reCalc()">
<form>
<table>
<tr>
<th>Quantity</th>
<th>Unit Cost</th>
<th>Total Cost</th>
</tr>
<tr>
<td>
<select id=Q1 onChange="reCalc()">
<option value="1">1 widget
<option value="2">2 widgets
<option value="3" selected>3 widgets
<option value="4">4 widgets
<option value="5">5 widgets
</select>
</td>
<td>
<select name=P1 onChange="reCalc()">
<option value="10.5">$10.50
<option value="20.25">$20.25
<option value="30.35" selected>$30.35
<option value="40.45">$40.45
<option value="50.55">$50.55
</select>
</td>
<td>
<input type=text name=a3 size=10 onFocus="this.blur()">
</td>
</tr>
</table>
</b>
</form>
</body>
</html>

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7148941
Actually what I posted will already handle that.  Form values are strings  and I use the parseInt method to insure that it is a numeric value.  That will also work very nicly to pick up the numeric portion of the string for the calculation.

It also uses integer arithmetic an then converts to the decimal value so that the common JavaScript rounding errors are eliminated.  The value and the display text do not have to be the same literal sting so the value can be set to what is necessary for the calcs and the text is set for the display. So what I posted does what you need.  

Cd&
0
 

Author Comment

by:lserrano
ID: 7149788
COBOLdinosaur, your solution works well EXCEPT your results appear, for example, as $10.7 rather than $10.70.
0
 

Author Comment

by:lserrano
ID: 7149855
COBOLdinosaur, your solution works well EXCEPT your results appear, for example, as $10.7 rather than $10.70.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 7149872
Oops,
Sorry.  I left edit for the $ and forgot the cents.  Happens with a senseless dinosaur sometimes.
This should do it:
<html>
<head>
<script>
function calculate(f)
{
var num=parseInt(f.quantity.options[f.quantity.options.selectedIndex].value);
var cost=parseInt(f.unit.options[f.unit.options.selectedIndex].value);
f.a3.value="$"+(num*cost)/100;
pieces=f.a3.value.split('.');
pieces[1]=(pieces[1]) ? pieces[1]+'00' : '00';
f.a3.value=pieces[0]+'.'+(pieces[1]).substr(0,2);
}
</script>
</head>

<body>
<form>
<select name="quantity" onchange="calculate(this.form)">
<option value="1">1</option>
<option value="2">2</option>
<option value="5">5</option>
</select>

<select name="unit" onchange="calculate(this.form)">
<option value="500">$5.00</option>
<option value="1035">$10.35</option>
<option value="2095">$20.95</option>
</select><br>
<input type="text" name="a3" id="a3" value="$">
</form>

</body>
</html>

Cd&
0
 

Author Comment

by:lserrano
ID: 7150530
Thanks, COBOLdinosaur!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7150598
Glad we could help.  Thanks for the A. :^)

Cd&
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7151004
lol. i could see this coming. sometimes i wonder that why do we even try...


:)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now