Solved

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

Posted on 2004-09-10
3
241 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
ID: 12026918
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
ID: 12027296
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
ID: 12028401
Muchas Gracias!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

930 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

11 Experts available now in Live!

Get 1:1 Help Now