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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Michel PlungjanConnect With a Mentor IT 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
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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
All Courses

From novice to tech pro — start learning today.