We help IT Professionals succeed at work.

Javascript to Loop Through TextBoxes and Sum up Numeric Values

davidcahan
davidcahan asked
on
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

Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
I would first use
.id in lowercase

sounds like your script takes the textsearch field with it...
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:

<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

IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
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

Author

Commented:
what do you mean by "or with the ASP reinstated"?
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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

Author

Commented:
great solution...