troubleshooting Question

looping through multiple forms javascript

Avatar of Bedrock9
Bedrock9 asked on
Web ComponentsJavaScriptWeb Applications
1 Comment1 Solution575 ViewsLast Modified:
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;}
 
ASKER CERTIFIED SOLUTION
dr_Pitter

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 1 Comment.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros