Javascript to Loop Through TextBoxes and Sum up Numeric Values

I need a robust javascript that will loop through the textboxes on a page and add up the numeric values in them.   It must be able to skip any textboxes, by id, that i don't want to include in the summation.  The script must be able to keep adding up the values every time the user changes a value in one of the text boxes.  I have code that i'm using and it WAS working all the way up until i checked it last time.   I've attached the snippet below.

When the user changes the amount in one text box, it seems to add incorrectly.  It adds what was already IN the textboxes, then adds it again.  So if i have 5 in one textbox, 5 in the second one and i add 5 to third, it gives me a total of 30 instead of 15.  If included the script.

The line that causes the problem is this one:

sum = sum + inputs[i].value * 1

I had that figured out and changed it to: sum = sum + inputs[i-1].value * 1

THIS TOTALLY WORKED but suddenly the totalValue is NaN.

Help me figure this out.  What is really driving me crazy is that it works in another part of my project and i don't see any difference between the types of textboxes in one page vs. the other.

function CalculateTotal(theFld) {
  // Your logic here please. :)
  var sum;
  var Max = <% =m_Max%>;
  var inputs = document.getElementsByTagName('input');
  sum = 0
  for(var i=0;i<inputs.length;i++){
  
 
  if(inputs[i].type == 'text' && inputs[i].ID != 'ctl00_txtSearch')
  
  { 
  
     sum = sum + inputs[i].value * 1; // multiply to preven string concatenation.
  }   
 
 
   }
    document.getElementById('<%= Total.ClientID %>').value = sum
    clearCheckBoxes()
    
    if (sum > Max) {
    
    HideLayer();
    } else {
    
    ShowLayer();
    }
}

Open in new window

davidcahanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
I would first use
.id in lowercase

sounds like your script takes the textsearch field with it...
0
Michel PlungjanIT ExpertCommented:

<script>
function CalculateTotal(theForm) {
  HideLayer();
  var sum = 0;
  var Max = 100;// <% =m_Max%>;
  var inputs = theForm.elements;
  for(var i=0;i<inputs.length;i++){
    if(inputs[i].type == 'text' && inputs[i].id != 'ctl00_txtSearch' && inputs[i].id != 'total') {
     var val = parseFloat(inputs[i].value); // change to parseInt if you do not have decimals
     if (!isNaN(val)) sum +=val; 
    }   
  }
  //document.getElementById('<%= Total.ClientID %>').value = sum
    theForm.total.value=sum;
//    clearCheckBoxes()
    
    if (sum <= Max) ShowLayer();
}
function HideLayer() {
  document.getElementById('error').style.display="none"
}
function ShowLayer() {
  document.getElementById('error').style.display=""
}
</script>
 
<form>
<input type="text" id="ctl00_txtSearch" value="Do not count me"><br>
<input type="text" onKeyUp="CalculateTotal(this.form)"><br>
<input type="text" onKeyUp="CalculateTotal(this.form)"><br>
<input type="text" onKeyUp="CalculateTotal(this.form)"><br>
<input type="text" name="total" id="total" readonly="readonly">
</form>
<div id="error">Total must be greater than <% =m_Max%></div>

Open in new window

0
Michel PlungjanIT ExpertCommented:
Or with the asp reinstated:
<script>
function CalculateTotal(theForm) {
  HideLayer();
  var sum = 0;
  var Max = <% =m_Max%>;
  var inputs = theForm.elements;
  for(var i=0;i<inputs.length;i++){
    if(inputs[i].type == 'text' && inputs[i].id != 'ctl00_txtSearch' && inputs[i].id != '<%= Total.ClientID %>') {
     var val = parseFloat(inputs[i].value); // change to parseInt if you do not have decimals
     if (!isNaN(val)) sum +=val; 
    }   
  }
  document.getElementById('<%= Total.ClientID %>').value = sum
  clearCheckBoxes()
    
  if (sum <= Max) ShowLayer();
}
function HideLayer() {
  document.getElementById('error').style.display="none"
}
function ShowLayer() {
  document.getElementById('error').style.display=""
}
</script>
 
<form>
<input type="text" id="ctl00_txtSearch" value="Do not count me"><br>
<input type="text" onKeyUp="CalculateTotal(this.form)"><br>
<input type="text" onKeyUp="CalculateTotal(this.form)"><br>
<input type="text" onKeyUp="CalculateTotal(this.form)"><br>
<input type="text" name="total" id="<%= Total.ClientID %>" readonly="readonly">
</form>
<div id="error">Total must be greater than <% =m_Max%></div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

davidcahanAuthor Commented:
what do you mean by "or with the ASP reinstated"?
0
Michel PlungjanIT ExpertCommented:
I gave you a version wich works for me on my harddisc, then I put your <%= ... %>  back in the last version - My guess is you included the total box  in the script
0
davidcahanAuthor Commented:
great solution...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.