Thread: Calculating total from multiple text inputs[]

1. Calculating total from multiple text inputs[]

Given a form like this...
HTML Code:
```<form id="ca" method="post" action="">
<table>
<tr>
<input type="hidden" name="artID[]" value="2" />
<td class="digit"><input type="text" class="num" name="incoming[]" /></td>
<td class="digit"><input type="text" class="num" name="outgoing[]" /></td>
<td class="digit" id="result0"><(result goes here)</td>
</tr>

<tr>
<input type="hidden" name="artID[]" value="3" />
<td class="digit"><input type="text" class="num" name="incoming[]" /></td>
<td class="digit"><input type="text" class="num" name="outgoing[]" /></td>
<td class="digit" id="result1">(result goes here)</td>
</tr>
...
<tr>
<td colspan="3">
<input type="button" class="button" value="Calculer" onclick="calc(this.form);" />
</tr>
</table>
</form>```
... with PHP it's rather trivial to calculate the result sum for each row (incoming minus outgoing = result) once the form is posted.

However I've been trying to come up with a Javascript solution which displays the result for each row onclick of the "Calculate" button, as a sort of preview before the form is actually submitted. Here's my, ahem, rather primitive attempt, which does not work:

HTML Code:
```function calc(){
var form = document.getElementById("ca");
for (var i = 0; i < form.elements["incoming"].length; i++) {
var total = 0;
var incoming = form.elements["incoming"][i].value;
var outgoing = form.elements["outgoing"][i].value;
total = (incoming - outgoing);
document.getElementById('result'+i).innerHTML = total;
}
}```
Any suggestions? Thanks!

2. something like:
Code:
```function calc(){
var count_1 = document.getElementsByName('incoming[]');
var total = 0;

for(var i = 0; i < count_1.length; i++) {
if(document.ca.elements['incoming[]'][i].value != '') {
total = (document.ca.elements['incoming[]'][i].value - document.ca.elements['outgoing[]'][i].value);
document.getElementById('result'+i).innerHTML = total;
}
}

}```

3. Thanks Spike! That looked promising, but didn't do anything
I modified it to this:
HTML Code:
```function calc(){
var ca = document.getElementById("ca");
var count_1 = document.getElementsByName('incoming[]');
var total = 0;

for(var i = 0; i < count_1.length; i++) {
if(ca.elements['incoming[]'][i].value != '') {
total = (ca.elements['incoming[]'][i].value - ca.elements['outgoing[]'][i].value);
document.getElementById('result'+i).innerHTML = total;
}
}
}```
... turning the form into a var first. Now I get the following JS error:
"document.getElementById("result" + i) has no properties"...

Nevermind: forgot to add id='resultxxx' to ALL of the td's duh!

Problem solved

4. Note that you already pass a reference to the form in the onclick handler. Use the reference like this:

Code:
```function calc(ca) {
// not needed anymore:
var ca = document.getElementById("ca");

// rest of code
}```

5. Originally Posted by Pepejeria
Note that you already pass a reference to the form in the onclick handler. Use the reference like this:

Code:
```function calc(ca) {
// not needed anymore:
var ca = document.getElementById("ca");

// rest of code
}```
Roger that. Thanks!

Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•