Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2004-09-10
3
Medium Priority
?
258 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 500 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…

705 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