looping through multiple forms javascript

Bedrock9
Bedrock9 used Ask the Experts™
on
Hi

I want to build a page that allows user to add an unlimited number of identical forms with incremented ID's, one for loan balance, another for interest rate and then two more for term in years and term in months.

The script needs to loop through and perform the same calculations on each form adding the total repayment figures together.

I could build a code which had a single form and looped through an infinite number of text inputs but when I tried to add multiple inputs I for each calculation I figured I would have to make the script insert incremented forms and loop through these rather than the individual inputs in order to seperate the inidividual calculations from each other.

I put this code together which is not working, can someone explain to me how my coding is incorrect? I don't want a cut and paste solution but just to get an understanding of how my code is not working correctly. I am assuming it is not accessing the element in the DOM correctly.

<div id="dynamicInput">
<form id="newform" name="newform" class="loans">
<input type="text" id="balance" name="balance" class="balance"><input type="text" id="rate" name="rate" class="rate">
</form>
<input type="button" class="cleanbutton" onclick="addInput('dynamicInput');" value="Add Loan"><p id="addition"></p>
     <input  name="Submit" type="button" class="cleanbutton" id="Submit"  onclick="sum(document.forms)" value="Submit"/>
</div>
</div>

var counter = 1;
function addInput(divName){
          var newdiv = document.createElement('form');
          newdiv.innerHTML = '<input type="text" id="balance'+(counter+1)+'" name="balance'+(counter+1)+'" class="balance"><input type="text" id="rate'+(counter+1)+'" name="rate'+(counter+1)+'" class="rate">'
          document.getElementById(divName).appendChild(newdiv);
          counter++;

}
var forms = document.getElementsByTagName("form");
function sum(forms) {
var number=0;
var i;
var f;
for ( i = 0; i < forms.length; i++ ) {
if (forms.elements.type== 'text') {   <-- (this website forced me to add a closing tag
var a=parseFloat(forms.elements[0].value);
var b=parseFloat(forms.elements[1].value);
var f=(a*b);
number+=f;};}
document.getElementById('addition').innerHTML=number;}
 
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

there are several syntax-errors in your sum-function. The following version should do the job

function sum(forms) {
  var number=0;
  var i;
  var f;
  for( i = 0; i < forms.length; i++ ) { 
    if (forms[i].elements[0].type == 'text' && forms[i].elements[1].type == 'text') {  
      var a=parseFloat(forms[i].elements[0].value);
      var b=parseFloat(forms[i].elements[1].value);
      var f=(a*b);
      number+=f;
    }
  }

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial