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.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Add percentages to calculated value

    Hi All

    I have a form that gives the sum result of a set of inputs (rounded to 2 points as they are currency)

    How would I add a function to produce % (plus) of the sum total.

    The percentages don't really matter on this example they are just to show (if anyone can ??) me how it done.

    Thanks

    Karen


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
            $(function () {
                var textBox1 = $('input:text[id$=Box1]').keyup(AddItUp);
                var textBox2 = $('input:text[id$=Box2]').keyup(AddItUp); 
                var textBox3 = $('input:text[id$=Box3]').keyup(AddItUp);
                var textBox4 = $('input:text[id$=Box4]').keyup(AddItUp);                        
                var textBox5 = $('input:text[id$=Box5]').keyup(AddItUp);
                var textBox6 = $('input:text[id$=Box6]').keyup(AddItUp); 
                        
     
             function AddItUp() {
                var value1 = textBox1.val();
                var value2 = textBox2.val();               
                var value3 = textBox3.val();
                var value4 = textBox4.val();               
                var value5 = textBox5.val();
                var value6 = textBox6.val();               
                var sum = add(value1, value2, value3, value4, value5, value6);
                $('input:text[id$=Total1]').val(sum);
            }
    
            function add() {
                var sum = 0;
                for (var i = 0, j = arguments.length; i < j; i++) {
                    if (IsNumeric(arguments[i])) {
                        sum += 100* parseFloat(arguments[i]);
                    }
                }
                return sum /100;
            }
            function IsNumeric(input) {
                return (input - 0) == input && input.length > 0;
            }
        });
    </script>
    
    </head>
    
    <body>
    
    <form id="form1" runat="server">
    	<asp:TextBox id="Box1" runat="server"></asp:TextBox><br />
    	<asp:TextBox id="Box2" runat="server"></asp:TextBox><br />
    	<asp:TextBox id="Box3" runat="server"></asp:TextBox><br />
    	<asp:TextBox id="Box4" runat="server"></asp:TextBox><br />
    	<asp:TextBox id="Box5" runat="server"></asp:TextBox><br />
    	<asp:TextBox id="Box6" runat="server"></asp:TextBox><br />	
    	<br /><br />
    	<asp:TextBox id="Total1" runat="server"></asp:TextBox>&nbsp;Total<br />
    	<asp:TextBox id="Total2" runat="server"></asp:TextBox>&nbsp;Total *5%<br />
    	<asp:TextBox id="Total3" runat="server"></asp:TextBox>&nbsp;Total * 23.76%<br />
    	<asp:TextBox id="Total4" runat="server"></asp:TextBox>&nbsp;Total * 2.5%<br />				
    	
    
    </form>
    
    </body>
    
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,920
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by Reflo2 View Post
    How would I add a function to produce % (plus) of the sum total.
    Surely this is just basic maths?

    Code:
    <script type = "text/javascript">
    
    var amount = 100.80;
    var percent = 20;
    var newAmount = amount * (percent/100 +1);
    alert (newAmount);
    
    </script>

    Quizmaster: Emmental and Double Gloucester are both types of what?
    Contestant: Banks.

    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Does this code really make sense, even in jQuery?
    Code:
            $(function () {
                var textBox1 = $('input:text[id$=Box1]').keyup(AddItUp);
                var textBox2 = $('input:text[id$=Box2]').keyup(AddItUp); 
                var textBox3 = $('input:text[id$=Box3]').keyup(AddItUp);
                var textBox4 = $('input:text[id$=Box4]').keyup(AddItUp);                        
                var textBox5 = $('input:text[id$=Box5]').keyup(AddItUp);
                var textBox6 = $('input:text[id$=Box6]').keyup(AddItUp);
    ???

    Seems to me like that is assigning the result of calling keyup to the six vars.

    Shouldn't all those lines be more like
    Code:
                var textBox1,textBox2,textBox3,textBox4,textBox5,textBox6;
                ( textBox1 = $('input:text[id$=Box1]') ).keyup(AddItUp);
                etc.
    And is there really any reason to use $('input:text[id$=Box1]')???

    What's wrong with simply $("#Box1")?

    But now why do it like that, at all?
    Code:
            $(function () {
                var boxes = [];
                for ( var b = 1; b <= 6; ++b )
                {
                    boxes[b] = $("#Box"+b);
                    boxes[b].keyup(AddItUp);
                }
    Though for the life of me I can't see any reason to drag in the entire jQuery library for this simple stuff.
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Here. No silly jQuery needed. (Not that jQuery is silly, just that it wasn't used for any worthwhile purpose in this page.) And actually tested *AS AN ASP.NET PAGE* (named "junk3.aspx" if you care).

    This shows the specified percentages being *ADDED* to the total there in each case.

    If you didn't want them added on, if you just wanted the bare percentages, just change all the 1.xxx numbers in the places in red to 0.xxx instead.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    
    transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    </head>
    
    <body>
    
    <form id="form1" runat="server">
    	<asp:TextBox id="Box1" runat="server"></asp:TextBox><br />
    	<asp:TextBox id="Box2" runat="server"></asp:TextBox><br />
    	<asp:TextBox id="Box3" runat="server"></asp:TextBox><br />
    	<asp:TextBox id="Box4" runat="server"></asp:TextBox><br />
    	<asp:TextBox id="Box5" runat="server"></asp:TextBox><br />
    	<asp:TextBox id="Box6" runat="server"></asp:TextBox><br />	
    	<br /><br />
    	<asp:TextBox id="Total1" runat="server"></asp:TextBox>&nbsp;Total<br />
    	<asp:TextBox id="Total2" runat="server"></asp:TextBox>&nbsp;Total *5%<br />
    	<asp:TextBox id="Total3" runat="server"></asp:TextBox>&nbsp;Total * 23.76%<br />
    	<asp:TextBox id="Total4" runat="server"></asp:TextBox>&nbsp;Total * 2.5%<br />				
    </form>
    
    <script type="text/javascript">
    (
      function( ) 
      {
          var form = document.getElementById("form1");
          var boxes = [ ];
          for ( var b = 1; b <= 6; ++b )
          {
              boxes[b] = form["Box"+b];
              boxes[b].onchange = addItUp;
          }
          function addItUp( )
          {
              var ttl = 0;
              for ( var b = 1; b <= 6; ++b )
              {
                  var val = Number( boxes[b].value );
                  if ( isNaN(val) ) 
                  {
                      boxes[b].value = "INVALID";
                  } else {
                      ttl += val; 
                  }
              }
              form.Total1.value = ttl.toFixed(2);
              form.Total2.value = ( ttl * 1.05 ).toFixed(2);           
              form.Total3.value = ( ttl * 1.2376 ).toFixed(2);           
              form.Total4.value = ( ttl * 1.025 ).toFixed(2);           
          } // end of addItUp
      } // end of anonymous master function
    )(); // self invoke master function
    </script>
    </body>
    </html>
    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.


  •  

    Posting Permissions

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