Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Aug 2002
    Location
    Malaysia
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Auto-calculate total amount

    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.

  • #2
    Regular Coder
    Join Date
    Aug 2003
    Posts
    383
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    
    <!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>
    
    &nbsp;........ another wild guess ........

  • #3
    New Coder
    Join Date
    Aug 2002
    Location
    Malaysia
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks!

    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

  • #4
    Regular Coder
    Join Date
    Aug 2003
    Posts
    383
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Check out 'The Arguments Object' here.
    &nbsp;........ another wild guess ........

  • #5
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,400
    Thanks
    11
    Thanked 595 Times in 575 Posts

    a simpler way

    Quote Originally Posted by jianneng View Post
    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.


    Code:
    <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>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #7
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    gereqi - I figured out how to make it multiply (simple for some I know...)

    I tried changing:
    Code:
    if (!isNaN(val)) //number?
    {
    total += val; //accumulate
    }
    To
    Code:
    if (!isNaN(val)) //number?
    {
    total *= val; //accumulate
    }
    And added
    Code:
    total = 1
    before the "for" loop
    Last edited by MadTurki; 02-27-2008 at 02:27 PM.

  • #8
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Last edited by MadTurki; 02-27-2008 at 02:30 PM. Reason: Updated

  • #9
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Auto-calculate total amount

    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.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,557
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    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:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Banned
    Join Date
    Jul 2011
    Location
    htdocs
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    how about this one

    PHP Code:
    <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

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    You are reviving a very old thread, and in addition have created a new thread on the same subject.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #13
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy creating auto calculator

    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!!!

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #15
    Regular Coder
    Join Date
    Aug 2010
    Posts
    713
    Thanks
    165
    Thanked 0 Times in 0 Posts
    Hi!


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

    Thank you


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •