Add percentages to calculated value

Reflo2 · 03-14-2013, 07:10 PM

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>

Philip M · 03-14-2013, 07:35 PM

Quote:

Originally Posted by Reflo2

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.

Old Pedant · 03-14-2013, 11:56 PM

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.

Old Pedant · 03-15-2013, 12:12 AM

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>