...

View Full Version : Auto-calculate total amount



jianneng
09-23-2003, 04:20 AM
Hi, I am thinking of how to write the code for this:

There are 4 textboxes, 3 of which allow you to enter any number (e.g. 1000, 2500, 12345, 100.10, etc.). So whenever I entered a number in one of them (or two or all of them), the 4th read-only textbox will automatically shows the total of the values in the 3 textboxes.

So...can anyone give me any references to this? Thanks.

cheesebag
09-23-2003, 05:08 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

input {width: 40px;}

</style>
<script type="text/javascript" language="javascript">

function autocalc(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, total = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
total += val; //accumulate
}
}
oForm.total.value = total; //out
}


</script>
</head>
<body onload="document.forms[0].reset()">
<form style="width:260px;margin:100px auto;border:2px black dashed;">
<table cellspacing="8">
<tr>
<!-- pass field reference ('this') and other field references -->
<td>value 1___<input name="t1" type="text" onkeyup="return autocalc(this,t2,t3)" tabindex="1"></td>
<td rowspan="3"><strong>total_____</strong><input name="total" type="text" readonly="readonly" value="0" tabindex="-1"></td>
</tr><tr>
<td>value 2___<input name="t2" type="text" onkeyup="return autocalc(this,t1,t3)" tabindex="2"></td>
</tr><tr>
<td>value 3___<input name="t3" type="text" onkeyup="return autocalc(this,t1,t2)" tabindex="3"></td>
</tr>
</table>
</form>
</body>
</html>

jianneng
09-23-2003, 05:25 AM
Thanks cheesebag! Exactly what I want...

I originally thought it would be a very simple code, but looks like there are plenty of complex stuff in there, esp. arrays...not my favourite subject :)

cheesebag
09-23-2003, 05:33 AM
Check out 'The Arguments Object' here (http://academ.hvcc.edu/~kantopet/javascript/index.php?page=adv+js+functions&parent=js+functions).

gereqi
02-20-2008, 01:40 PM
Hello,

I just saw your great code for auto calculation fields which suited really great, was really easy and well commented.

I was just wondering if you could help me also in my intranet page where I need to make some more complex calculations like plus, minus and percentages...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Pasqyra Ditore</title>
</head>

<body>

<p><b><font face="Verdana" size="2">Calculations</font></b></p>
<form method="POST" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
<p><font face="Verdana" size="2">
<span style="vertical-align: middle; font-weight: 700">A&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
</span></font><font size="1">
<input type="text" name="T1" size="20" style="font-family: Verdana; vertical-align: middle; font-weight: bold; color: #000080; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px"></font></p>
<p><b><font face="Verdana" size="2">B&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; </font></b>
<font size="1">
<input type="text" name="T2" size="20" style="font-family: Verdana; vertical-align: middle; font-weight: bold; color: #000080; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px"></font></p>
<p><b><font face="Verdana" size="2">C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; </font></b>
<font size="1">
<input type="text" name="T3" size="20" style="font-family: Verdana; vertical-align: middle; font-weight: bold; color: #000080; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px"></font></p>
<p><b><font face="Verdana" size="2">D1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font></b>
<font size="1">
<input type="text" name="T4" size="20" style="font-family: Verdana; vertical-align: middle; font-weight: bold; color: #000080; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px"></font></p>
<p><b><font face="Verdana" size="2">D1a&nbsp;&nbsp;&nbsp; </font></b>
<font size="1">
<input type="text" name="T10" readonly="readonly" size="20" style="font-family: Verdana; vertical-align: middle; font-weight: bold; color: #666666; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #CCCCCC" value="=D1*8/100"></font></p>
<p><b><font face="Verdana" size="2">D2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font></b>
<font size="1">
<input type="text" name="T9" size="20" style="font-family: Verdana; vertical-align: middle; font-weight: bold; color: #000080; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px"></font></p>
<p><b><font face="Verdana" size="2">D2a&nbsp;&nbsp; </font></b>
<font size="1">
<input type="text" name="T11" readonly="readonly" size="20" style="font-family: Verdana; vertical-align: middle; font-weight: bold; color: #666666; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #CCCCCC" value="=D2*8/100"></font></p>
<p><b><font face="Verdana" size="2">E&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; </font></b>
<font size="1">
<input type="text" name="T5" size="20" style="font-family: Verdana; vertical-align: middle; font-weight: bold; color: #000080; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px"></font></p>
<p><b><font face="Verdana" size="2">F&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; </font></b>
<font size="1">
<input type="text" name="T6" readonly="readonly" size="20" style="font-family: Verdana; vertical-align: middle; font-weight: bold; color: #666666; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #CCCCCC" value="=D1+D2-E"></font></p>
<p><b><font face="Verdana" size="2">G&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; </font></b>
<font size="1">
<input type="text" name="T7" readonly="readonly" size="20" style="font-family: Verdana; vertical-align: middle; font-weight: bold; color: #666666; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #CCCCCC" value="=D1a+D2a"></font></p>
<p><b><font face="Verdana" size="2">H&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; </font></b>
<font size="1">
<input type="text" name="T8" readonly="readonly" size="20" style="font-family: Verdana; vertical-align: middle; font-weight: bold; color: #666666; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #CCCCCC" value="=A+B+C+F+G"></font></p>
<p>
<input type="submit" value="SEND DATA" name="B1" style="font-family: Verdana; font-size: 8pt; vertical-align: middle; font-weight: bold; color: #666666; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #CCCCCC">&nbsp;&nbsp;&nbsp;
<input type="reset" value="CLEAR DATA" name="B2" style="font-family: Verdana; font-size: 8pt; vertical-align: middle; font-weight: bold; color: #666666; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #CCCCCC"></p>
</form>

</body>
</html>

Thanks in advance for your kindness and your time

Best regards,

Genti

rnd me
02-21-2008, 12:38 PM
I originally thought it would be a very simple code, but looks like there are plenty of complex stuff in there, esp. arrays...not my favourite subject :)

i dont think it need to be complicated at all.
i could not follow much of the posted script.
not to downplay the help, but i think this might be worth examining.





<form>
<input onkeyup='recalc()' /> + <input onkeyup='recalc()' /> + <input onkeyup='recalc()' /> = <input readonly="readonly" />
</form>
<script>

function recalc(){
var es= document.forms[0].elements;
var V=function(i){ return Number(es[i].value); }
es[3].value = V(0) + V(1) + V(2);
}

</script>

MadTurki
02-26-2008, 09:49 PM
gereqi - I figured out how to make it multiply (simple for some I know...)

I tried changing:

if (!isNaN(val)) //number?
{
total += val; //accumulate
}

To

if (!isNaN(val)) //number?
{
total *= val; //accumulate
}

And added
total = 1 before the "for" loop

MadTurki
02-26-2008, 10:32 PM
Now I'm trying to have checkboxes add when selected. It's for a conference registration so:
Are you attending [ ]Monday [ ]Tuesday [ ]Wednesday - sort of thing. Where each day is a different value. Right now, it adds the checkboxes even if they're not checked and when and I uncheck it, I'd like it to subtract that value :P But lets not get ahead of ourselves yet ;) First... adding! :)

Thanks in advance!

islander843
07-20-2010, 12:40 AM
This is a great piece of code. I've been trying to come up with something like it without much luck.

Question... I'm trying to figure out a way to use auto-calculate with checkboxes. When someone checks a box it'll automatically add the pre-defined value of that box to the running total, and then subtract it if they un-check the box.

Anyone have any ideas?

Thanks in advance.

Old Pedant
07-20-2010, 02:22 AM
Trivial. Been done dozens if not hundreds of times in these forums, before.

The "trick" is in finding a way to designate *which* checkboxes participate in the summing. Do you do it by checkbox name? By a className (style) on the box? Or by what?

Simple little demo, off top of my head, based on name:


<html>
<head>
<script type="text/javascript">
function ReCalculate(form)
{
var total = 0;
for ( var e = 0; e < form.elements.length; ++e )
{
var fld = form.elements[e];
if ( fld.name.substring(0,4) == "ADD_" )
{
if ( fld.checked ) total += parseFloat( fld.value );
}
}
form.total.value = total.toFixed(2);
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="ADD_entree" value="14.95" onclick="ReCalculate(this.form);"/> Entree<br/>
<input type="checkbox" name="ADD_beverage" value="3.95" onclick="ReCalculate(this.form);"/> Beverage<br/>
<input type="checkbox" name="ADD_dessert" value="5.95" onclick="ReCalculate(this.form);"/> Dessert<br/>
<input type="checkbox" name="togo"> To go??<br/>
<input type="text" readonly name="total" value="0.00" />
</form>
</body>
</html>

But there are other ways to determine what fields get added in.

Anakdajal
07-22-2011, 04:19 PM
how about this one


<table width="415" cellspacing="1" cellpadding="1">
<tr>
<th width="151" scope="col">Price</th>
<th width="189" scope="col">qty</th>
<th width="63" scope="col">total</th>
</tr>
<tr>
<td><label>
<input name="textfield" type="text" id="textfield" value="2000">
</label></td>
<td><label>
<input name="textfield2" type="text" id="textfield2" value="2">
</label></td>
<td><label>
<input name="textfield3" type="text" id="textfield3" value="4000">
</label></td>
</tr>
<tr>
<td><input name="textfield4" type="text" id="textfield4" value="3000"></td>
<td><input name="textfield5" type="text" id="textfield5" value="2"></td>
<td><input name="textfield6" type="text" id="textfield6" value="6000"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Total</td>
<td><label>
<input name="textfield7" type="text" id="textfield7" value="10000">
</label></td>
</tr>
</table>

how to calculate that textfield in 2 or more rows

Philip M
07-22-2011, 05:32 PM
You are reviving a very old thread, and in addition have created a new thread on the same subject. :(

sleepyheadking
08-26-2011, 01:05 PM
HI!

im trying to create an auto pro rata calculator where there are four [4] boxes. first box should be where we could enter the customer's plan [29,39,40 etc.] and it should be divided with what ever i will enter on the second box w/c will be for the number of days in a month [28,29,30,31]. the 3rd box should be where i can enter the number of days the cust. was able to use the service and it needs to be multiplied from box 2. 4th box should be a read only box where the pro rata will be displayed.

so:

[box 1] divided "/" by [box 2] multiplied "*" by [box 3] equals "=" to box four

thanks!!!

Philip M
08-26-2011, 02:09 PM
1) Please do not revive an ancient and long-resolved thread. Prefer to start a new thread of your own.

2) This forum is not a free coding service. Show us the code you have written so far, and then doubtless someone will help you to correct/improve it. You will need to validate the input data carefully to ensure it is numeric and within the appropriate range.

It is your responsibility to die() if necessary….. - PHP Manual

newphpcoder
10-14-2011, 10:15 AM
Hi!


Can I used the code and I want to know how can be the total become into two decimal places?

Thank you

newphpcoder
10-17-2011, 07:37 AM
Good day!

I tried to edit the codes and i want to happen is the value of textbox amount will add also in the autocalculated.

here is the code:


<script type="text/javascript" language="javascript">

function autocalearn(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, TotEarn = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
TotEarn += val; //accumulate
}
}
//oForm.TotEarn.value = TotEarn.toFixed(2); //out
oForm.TotEarn.value = TotEarn.toFixed(2) + document.getElementById('Amount').value;
}

</script>


the output of this code is when I input 10 the amount data is 100 the total earn is 10100..its wrong..I want result is 110.

Thank you...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum