slopfront
preferences

Add fields, run calculations using javascript and...?

5 points · submitted Apr 2014 by u/Tits_McCoder · archived

I need to be able to run a series of calculations on a value and present the answer on the page. I figured out how to do that in javascript, no problem. I have 2 added complications:

  • The user may have two types of values, we will call them Loan A and Loan B. All Loan As have to be added together and all Loan Bs have to be added together, then have the same series of calculations performed on them separately, and only then can the 2 separate values be added together and presented to the user.

  • I do not know how many loans will need to be calculated.

For example, let's say that the user has a person with two Loan A types and three Loan B types. The user will need to add a text entry field for each Type A loan, and each Type B loan, then the code will need to add all the type A loans and all the Type B loans together, then run the calculations on each total separately, then add the results together and present them on the page.

This is very complicated and currently users are doing this manually. Unsurprisingly, there are a lot of human errors as a result.

What can I do to allow users to add fields for each additional loan, and how do I keep the different loan times separated from each other?

6 comments · 78% upvoted · other discussions

comments

Vectronic 2 points · Apr 2014

Well the calculation part should be easy, since you should know which group each loan belongs to already...

SumA += LoanA[i]
SumB += LoanB[i]
SumT = SumA + SumB

The problem is likely the web-page design, it's fairly easy to make it dynamic.

<div><textbox><textbox><button-add></div>
<button-calculate>

Each time <button-add> is clicked, it inserts a new <div>, then when <button-calculate> is pressed, it calls your function, which collects the <divs> gets the values, adds them accordingly.

That way they start with 1 Loan, but can add hundreds if need be, and on the 'code' side, its doesn't really change.

var data = *.getElementsByTag/Name/Class/etc
for(var i=0;i<data.length;i++){
    sum stuff
}

It doesn't really matter how long that array gets, or if the array is only 1 thing.

Tits_McCoder [OP] 1 points · Apr 2014

Thanks! I am going to try that later tonight and see if I can get it going.

Vectronic 1 points · Apr 2014

All you really need to know is:

  1. How to create an element
  2. How to add an element to another element
  3. How to get elements by a value

Something like:

var nDiv = document.createElement('div');
var tBox = document.createElement('textbox');
nDiv.appendChild(tBox);
body/element/etc.appendChild(nDiv);

it's more complex than that, since you'll also need to name them:

tBox.id = "LoanSomething";

before adding them to the page, and for the Button, set it's onclick event to call your function addloan()...

then later in function calc()

var divs = document.getElementById('name-of-container').getElementsBytagName('div');
var box;
for(var i=0;i<divs.length;i++){
    box = divs[i].getElementById('LoanSomething');
    sum += box.value;
}

then output it however you are doing it already.

It's probably only about 25 lines of code altogether (and in no way resembling my examples, lol).

rjcarr 1 points · Apr 2014

What can I do to allow users to add fields for each additional loan, and how do I keep the different loan times separated from each other?

It's hard to answer this question without knowing what you've already done. It seems you want to create two loan types that have similar functionality yet are kept separate (say, in parallel lists) that aren't combined until they are finished calculating.

You can do this with inheritance, or just fake it by creating methods of the same name and have some controller work with each of the object separately.

Again, I can't go into too many details without knowing what you've already done.

Tits_McCoder [OP] 1 points · Apr 2014

The first problem I want to solve, and perhaps I should just ask it as a separate question, is how do I allow the user to add new form fields and then account for those additions in my calculations?

rjcarr 1 points · Apr 2014

You'll want to create objects that act as the model for what is put into the form. So, if somebody adds a text field, you then add this field to your data model.

Then when you're doing the calculations you just look to see if those fields are present in your model and use them if available.

Is that what you're asking?