Solved

Adding and Formatting textbox values on an asp.net page using javascript

Posted on 2004-09-10
3
240 Views
Last Modified: 2012-06-21
Okay my big function is SetGrandTotal() which is called by each of the other smaller functions at the bottom that are all named Format"something"() and each of those are set as the function for the onblur event for the textboxes that they address inside the function.  The first one of these textboxes that I enter something in the function works perfectly, it formats the number entered into a double and adds this to all the other textbox values you see in SetGrandTotal().  But the second value I enter (it doesnt matter which textbox I choose) the value is formatted into a double but the grandtotal is not updated with the new accumulated value.  The textboxes that I have Format"whatever"() functions for are the only ones that I can actually enter a value in.  This is why you see 11 textbox values in SetGrandTotal() that sum up to the GrandTotal but only 5 format functions that call the SetGrandtotal() function.  Again, the problem is that the txtGrandtotal textbox is only updated with a new value when I change the first of the five textboxes I can change.  After that, the values I enter in the other textboxes that I can change are formatted if they need to be so it is seeing the Format() function but its either not executing the SetGrandTotal() or there is something in SetGrandTotal that I have wrong that will not let txtGrandTotal be updated more than once.  Please help me see if my logic is correct here, this one is really urgent!  Here's the code, at the bottom are the format() functions that call SetGrandTotal():

function SetGrandTotal(form) {
      var AirTotal = 0.00;
      var LodgingTotal = 0.00;
      var PDTotal = 0.00;
      var CarTotal = 0.00;
      var PhoneTotal = 0.00;
      var ParkingTotal = 0.00;
      var MilesTotal = 0.00;
      var TaxiTotal = 0.00;
      var BaggageTotal = 0.00;
      var TuitionTotal = 0.00;
      var OtherTotal = 0.00;
      var GrandTotal = 0.00;
      
      if (form.txtAirTotal.value == "")
      {
      AirTotal = 0.00;
      }
      else
      {
      AirTotal = eval(form.txtAirTotal.value);
      AirTotal = parseFloat(AirTotal,10).toFixed(2);
      }
      if (form.txtLodgingTotal.value == "")
      {
      LodgingTotal = 0.00;
      }
      else
      {
      LodgingTotal = eval(form.txtLodgingTotal.value);
      LodgingTotal = parseFloat(LodgingTotal,10).toFixed(2);
      }
      if (form.txtPDTotal.value == "")
      {
      PDTotal = 0.00;
      }
      else
      {
      PDTotal = eval(form.txtPDTotal.value);
      PDTotal = parseFloat(PDTotal,10).toFixed(2);
      }
      if (form.txtCarTotal.value == "")
      {
      CarTotal = 0.00;
      }
      else
      {
      CarTotal = eval(form.txtCarTotal.value);
      CarTotal = parseFloat(CarTotal,10).toFixed(2);
      }
      if (form.txtPhoneTotal.value == "")
      {
      PhoneTotal = 0.00;
      }
      else
      {
      PhoneTotal = eval(form.txtPhoneTotal.value);
      PhoneTotal = parseFloat(PhoneTotal,10).toFixed(2);
      }
      if (form.txtParkingTotal.value == "")
      {
      ParkingTotal = 0.00;
      }
      else
      {
      ParkingTotal = eval(form.txtParkingTotal.value);
      ParkingTotal = parseFloat(ParkingTotal,10).toFixed(2);
      }
      if (form.txtMilesTotal.value == "")
      {
      MilesTotal = 0.00;
      }
      else
      {
      MilesTotal = eval(form.txtMilesTotal.value);
      MilesTotal = parseFloat(MilesTotal,10).toFixed(2);
      }
      if (form.txtTaxiTotal.value == "")
      {
      TaxiTotal = 0.00;
      }
      else
      {
      TaxiTotal = eval(form.txtTaxiTotal.value);
      TaxiTotal = parseFloat(TaxiTotal,10).toFixed(2);
      }
      if (form.txtBaggageTotal.value == "")
      {
      BaggageTotal = 0.00;
      }
      else
      {
      BaggageTotal = eval(form.txtBaggageTotal.value);
      BaggageTotal = parseFloat(BaggageTotal,10).toFixed(2);
      }
      if (form.txtTuitionTotal.value == "")
      {
      TuitionTotal = 0.00;
      }
      else
      {
      TuitionTotal = eval(form.txtTuitionTotal.value);
      TuitionTotal = parseFloat(TuitionTotal,10).toFixed(2);
      }
      if (form.txtOtherTotal.value == "")
      {
      OtherTotal = 0.00;
      }
      else
      {
      OtherTotal = eval(form.txtOtherTotal.value);
      OtherTotal = parseFloat(OtherTotal,10).toFixed(2);
      }
      GrandTotal = AirTotal + LodgingTotal + PDTotal + CarTotal + PhoneTotal + ParkingTotal + MilesTotal + TaxiTotal + BaggageTotal + TuitionTotal + OtherTotal;
      form.txtGrandTotal.value = parseFloat(GrandTotal,10).toFixed(2);
      }
      
      function FormatParking(form){
            
            var ParkingTotal = 0.00;
            ParkingTotal = eval(form.txtParkingTotal.value);
            ParkingTotal = parseFloat(ParkingTotal,10).toFixed(2);
            form.txtParkingTotal.value = ParkingTotal;
            SetGrandTotal(form);
                                                }
      function FormatTaxi(form){
            
            var TaxiTotal = 0.00;
            TaxiTotal = eval(form.txtTaxiTotal.value);
            TaxiTotal = parseFloat(TaxiTotal,10).toFixed(2);
            form.txtTaxiTotal.value = TaxiTotal;
            SetGrandTotal(form);
                                                }
      function FormatBaggage(form){
            
            var BaggageTotal = 0.00;
            BaggageTotal = eval(form.txtBaggageTotal.value);
            BaggageTotal = parseFloat(BaggageTotal,10).toFixed(2);
            form.txtBaggageTotal.value = BaggageTotal;
            SetGrandTotal(form);
                                                }
      function FormatTuition(form){
            
            var TuitionTotal = 0.00;
            TuitionTotal = eval(form.txtTuitionTotal.value);
            TuitionTotal = parseFloat(TuitionTotal,10).toFixed(2);
            form.txtTuitionTotal.value = TuitionTotal;
            SetGrandTotal(form);
                                                }
      function FormatOther(form){
            
            var OtherTotal = 0.00;
            OtherTotal = eval(form.txtOtherTotal.value);
            OtherTotal = parseFloat(OtherTotal,10).toFixed(2);
            form.txtOtherTotal.value = OtherTotal;
            SetGrandTotal(form);
                                                }                  
                  
0
Comment
Question by:jacobymatt
  • 2
3 Comments
 

Author Comment

by:jacobymatt
Comment Utility
Just in case this is important, this is how I set these as my onblur events:
        txtParkingTotal.Attributes.Add("onblur", "FormatParking(this.form);")
        txtTaxiTotal.Attributes.Add("onblur", "FormatTaxi(this.form);")
        txtBaggageTotal.Attributes.Add("onblur", "FormatBaggage(this.form);")
        txtTuitionTotal.Attributes.Add("onblur", "FormatTuition(this.form);")
        txtOtherTotal.Attributes.Add("onblur", "FormatOther(this.form);")

and something else I just realized in testing this thing:  the txtParkingTotal onblur event is working differently than the others.  I can change that value as many times as I want and it will be formatted if needed to a double and the GrandTotal will be updated with whatever value I put in txtParkingTotal.  The order that you see I have the textboxes in just above is not only the order they are added in my SetGrandTotal() function but also the order they are stacked on my web form.  If I change the values starting with the last one which is txtOtherTotal, the GrandTotal is updated with what I put in txtOtherTotal, the other textboxes are blank at this point.  Then I move up one, and change the value of txtTuitionTotal, and now txtGrandTotal is updated with whatever value I enter in txtTuitionTotal instead of the sum of txtTuitionTotal and txtOtherTotal.  The same thing happens as I keep moving up changing the values, the grandtotal is updated with each new value I enter as I move up the list.  Once I get to the top of the ones I can change which is txtParkingTotal this one dominates the rest so once I have entered a value for txtParkingTotal, txtGrandTotal is updated with that value and it doesnt matter what I put in the other textboxes, txtGrandTotal keeps whatever value I have in txtParkingTotal.  Sorry this is so incredibly long but I dont know how else to explain it.  
0
 
LVL 19

Accepted Solution

by:
dakyd earned 125 total points
Comment Utility
toFixed() returns a string, not a number.  So you're setting your Total variables to strings, and then concatenating them.  Then, you cut off all but the last two points past the decimal, so you essentially see no change after the first input box.  A simple fix would be to use parseFloat again, I threw together an example page to illustrate what I mean.  This should also fix the weirdness with the event handlers that you're seeing.  Hope that helps.

<html>
<head>
<script type="text/javascript">
function SetGrandTotal(theForm) {
     var AirTotal = 0.00;
     var LodgingTotal = 0.00;
     var PDTotal = 0.00;
     var CarTotal = 0.00;
     var PhoneTotal = 0.00;
     var ParkingTotal = 0.00;
     var MilesTotal = 0.00;
     var TaxiTotal = 0.00;
     var BaggageTotal = 0.00;
     var TuitionTotal = 0.00;
     var OtherTotal = 0.00;
     var GrandTotal = 0.00;
     
     if (theForm.txtAirTotal.value == "")
     {
     AirTotal = 0.00;
     }
     else
     {
     AirTotal = parseFloat(theForm.txtAirTotal.value,10).toFixed(2);
     AirTotal = parseFloat(AirTotal);
     }
     if (theForm.txtLodgingTotal.value == "")
     {
     LodgingTotal = 0.00;
     }
     else
     {
     LodgingTotal = parseFloat(theForm.txtLodgingTotal.value,10).toFixed(2);
     LodgingTotal = parseFloat(LodgingTotal);
     }
     if (theForm.txtPDTotal.value == "")
     {
     PDTotal = 0.00;
     }
     else
     {
     PDTotal = parseFloat(theForm.txtPDTotal.value,10).toFixed(2);
     PDTotal = parseFloat(PDTotal);
     }
     if (theForm.txtCarTotal.value == "")
     {
     CarTotal = 0.00;
     }
     else
     {
     CarTotal = parseFloat(theForm.txtCarTotal.value,10).toFixed(2);
     CarTotal = parseFloat(CarTotal);
     }
     if (theForm.txtPhoneTotal.value == "")
     {
     PhoneTotal = 0.00;
     }
     else
     {
     PhoneTotal = parseFloat(theForm.txtPhoneTotal.value,10).toFixed(2);
     PhoneTotal = parseFloat(2);
     }
     if (theForm.txtParkingTotal.value == "")
     {
     ParkingTotal = 0.00;
     }
     else
     {
     ParkingTotal = parseFloat(theForm.txtParkingTotal.value,10).toFixed(2);
     ParkingTotal = parseFloat(ParkingTotal);
     }
     if (theForm.txtMilesTotal.value == "")
     {
     MilesTotal = 0.00;
     }
     else
     {
     MilesTotal = parseFloat(theForm.txtMilesTotal.value,10).toFixed(2);
     MilesTotal = parseFloat(MilesTotal);
     }
     if (theForm.txtTaxiTotal.value == "")
     {
     TaxiTotal = 0.00;
     }
     else
     {
     TaxiTotal = parseFloat(theForm.txtTaxiTotal.value,10).toFixed(2);
     TaxiTotal = parseFloat(TaxiTotal);
     }
     if (theForm.txtBaggageTotal.value == "")
     {
     BaggageTotal = 0.00;
     }
     else
     {
     BaggageTotal = parseFloat(theForm.txtBaggageTotal.value,10).toFixed(2);
     BaggageTotal = parseFloat(BaggageTotal);
     }
     if (theForm.txtTuitionTotal.value == "")
     {
     TuitionTotal = 0.00;
     }
     else
     {
     TuitionTotal = parseFloat(theForm.txtTuitionTotal.value,10).toFixed(2);
     TuitionTotal = parseFloat(TuitionTotal);
     }
     if (theForm.txtOtherTotal.value == "")
     {
     OtherTotal = 0.00;
     }
     else
     {
     OtherTotal = parseFloat(theForm.txtOtherTotal.value,10).toFixed(2);
     OtherTotal = parseFloat(OtherTotal);
     }
     GrandTotal = AirTotal + LodgingTotal + PDTotal + CarTotal + PhoneTotal + ParkingTotal + MilesTotal + TaxiTotal + BaggageTotal + TuitionTotal + OtherTotal;
     alert(GrandTotal);
     theForm.txtGrandTotal.value = parseFloat(GrandTotal,10).toFixed(2);
     }
     
     function FormatParking(theForm){
         
          var ParkingTotal = 0.00;
          ParkingTotal = parseFloat(theForm.txtParkingTotal.value,10).toFixed(2);
          theForm.txtParkingTotal.value = ParkingTotal;
          SetGrandTotal(theForm);
                                        }
     function FormatTaxi(theForm){
         
          var TaxiTotal = 0.00;
          TaxiTotal = parseFloat(theForm.txtTaxiTotal.value,10).toFixed(2);
          theForm.txtTaxiTotal.value = TaxiTotal;
          SetGrandTotal(theForm);
                                        }
     function FormatBaggage(theForm){
         
          var BaggageTotal = 0.00;
          BaggageTotal = parseFloat(theForm.txtBaggageTotal.value,10).toFixed(2);
          theForm.txtBaggageTotal.value = BaggageTotal;
          SetGrandTotal(theForm);
                                        }
     function FormatTuition(theForm){
         
          var TuitionTotal = 0.00;
          TuitionTotal = parseFloat(theForm.txtTuitionTotal.value,10).toFixed(2);
          theForm.txtTuitionTotal.value = TuitionTotal;
          SetGrandTotal(theForm);
                                        }
     function FormatOther(theForm){
         
          var OtherTotal = 0.00;
          OtherTotal = parseFloat(theForm.txtOtherTotal.value,10).toFixed(2);
          theForm.txtOtherTotal.value = OtherTotal;
          SetGrandTotal(theForm);
                                        }            
</script>
</head>

<body>
<form>
  <input type="text" id="txtAirTotal" name="txtAirTotal" /><br />
  <input type="text" id="txtLodgingTotal" name="txtLodgingTotal" /><br />
  <input type="text" id="txtPDTotal" name="txtPDTotal" /><br />
  <input type="text" id="txtCarTotal" name="txtCarTotal" /><br />
  <input type="text" id="txtPhoneTotal" name="txtPhoneTotal" /><br />
  <input type="text" id="txtParkingTotal" name="txtParkingTotal" onchange="FormatParking(this.form)" /><br />
  <input type="text" id="txtMilesTotal" name="txtMilesTotal" /><br />
  <input type="text" id="txtTaxiTotal" name="txtTaxiTotal" onchange="FormatTaxi(this.form)" /><br />
  <input type="text" id="txtBaggageTotal" name="txtBaggageTotal" onchange="FormatBaggage(this.form)" /><br />
  <input type="text" id="txtTuitionTotal" name="txtTuitionTotal" onchange="FormatTuition(this.form)" /><br />
  <input type="text" id="txtOtherTotal" name="txtOtherTotal" onchange="FormatOther(this.form)" /><br />
  <input type="text" id="txtGrandTotal" name="txtGrandTotal" />
</form>
</body>
</html>
0
 

Author Comment

by:jacobymatt
Comment Utility
Muchas Gracias!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now