We help IT Professionals succeed at work.
Get Started

looping through multiple forms javascript

572 Views
Last Modified: 2013-11-18
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
This problem has been solved!
Unlock 1 Answer and 1 Comment.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE