• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 594
  • Last Modified:

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

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
lserrano
Asked:
lserrano
  • 5
  • 4
  • 3
  • +2
1 Solution
 
ahosangFinance Systems DeveloperCommented:
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
 
COBOLdinosaurCommented:
<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
 
zvonkoCommented:
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
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
COBOLdinosaurCommented:
which is IE only...

Cd&
0
 
zvonkoCommented:
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
 
lserranoAuthor Commented:
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
 
lexxwernCommented:
<offtopic>

so many solutions!

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

</offtopic>
0
 
zvonkoCommented:
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
 
COBOLdinosaurCommented:
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
 
lserranoAuthor Commented:
COBOLdinosaur, your solution works well EXCEPT your results appear, for example, as $10.7 rather than $10.70.
0
 
lserranoAuthor Commented:
COBOLdinosaur, your solution works well EXCEPT your results appear, for example, as $10.7 rather than $10.70.
0
 
COBOLdinosaurCommented:
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
 
lserranoAuthor Commented:
Thanks, COBOLdinosaur!
0
 
COBOLdinosaurCommented:
Glad we could help.  Thanks for the A. :^)

Cd&
0
 
lexxwernCommented:
lol. i could see this coming. sometimes i wonder that why do we even try...


:)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 5
  • 4
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now