Please help me out on this. I have Javascript like the following:

function calc() {
  var table = document.getElementById(tableNum);
  var rowCount = table.rows.length;
  for (var i = 0; i < rowCount; i++) {
    var totalNum[i] = document.formNum.txt1[i].value * document.formNum.txt2[i].value;
    document.getElementById('totalCalc[' + i + ']').innerHTML = totalNum;
  }
}

And HTML like this:

<table id="tableNum">    
<form name="formNum" action="" id="formNum">
<tr>
<td><input type="text" name="txt1[]" onkeyup="calc()"/></td>
<td><input type="text" name="txt2[]" onkeyup="calc()"/></td>
<td><span id="totalCalc[]"></span></td>
</tr>
</form>
</table>

The number of input fields is unknown. No error, but totalCalc field is empty. Please tell me what I have done wrong. Thanks.

EDIT: I'm sorry, I forgot to mention both the input fields are in a table. Please check the edited code. Thanks.

EDIT: I'm actually working on a demo which the number of table row is defined by user, by clicking insert row button.

EDIT: Thanks Travis for the code. After a few changes, the code is working now. But only the first row is working. I'm thinking to get the length of the row and to use for loop for the text fields. <input type="text" name="txt1[<?php echo $rowLength;?>]" onkeyup="calc()"/> Does anyone have other ideas? Thanks.

Please help me out on this. I have Javascript like the following:

function calc() {
  var table = document.getElementById(tableNum);
  var rowCount = table.rows.length;
  for (var i = 0; i < rowCount; i++) {
    var totalNum[i] = document.formNum.txt1[i].value * document.formNum.txt2[i].value;
    document.getElementById('totalCalc[' + i + ']').innerHTML = totalNum;
  }
}

And HTML like this:

<table id="tableNum">    
<form name="formNum" action="" id="formNum">
<tr>
<td><input type="text" name="txt1[]" onkeyup="calc()"/></td>
<td><input type="text" name="txt2[]" onkeyup="calc()"/></td>
<td><span id="totalCalc[]"></span></td>
</tr>
</form>
</table>

The number of input fields is unknown. No error, but totalCalc field is empty. Please tell me what I have done wrong. Thanks.

EDIT: I'm sorry, I forgot to mention both the input fields are in a table. Please check the edited code. Thanks.

EDIT: I'm actually working on a demo which the number of table row is defined by user, by clicking insert row button.

EDIT: Thanks Travis for the code. After a few changes, the code is working now. But only the first row is working. I'm thinking to get the length of the row and to use for loop for the text fields. <input type="text" name="txt1[<?php echo $rowLength;?>]" onkeyup="calc()"/> Does anyone have other ideas? Thanks.

• javascript
• forms
• loops

• NO id with tableNum in Question, form id is formNum – xkeshav Commented Jan 2, 2013 at 6:46
• 3 what do you want? you code makes no sense. – xiaoyi Commented Jan 2, 2013 at 6:53
• Can you use Jquery, It will be fast and efficient. – ankur Commented Jan 2, 2013 at 6:53
• after edit: still your HTML is pletely wrong/ where is tr td? – xkeshav Commented Jan 2, 2013 at 6:57
• The code is working without array. The calculation is correct. But once I have added array into the code, the totalCalc field does not work anymore. – Lorek Bryanson Commented Jan 2, 2013 at 7:12

4 Answers 4

The first thing seems wrong is

document.getElementById(tableNum);

should be

document.getElementById("tableNum");

Secondly,

var totalNum[i] =

should be

var totalNum =

Also, its not working, you can find it out quickly by debugging through firebug or chrome's integrated developer tool. Which will help you for syntax verification as well.

Here is what is going on.

HTML first

If you are going to reference these by indices, then use proper indices, like this

name="txt1[0]"
name="txt2[0]"
<span id="totalCalc[0]">

Javascript

document.getElementById(tableNum);

getElementsById expects a string, so this should be

document.getElementById("tableNum");

Since you are iterating, you only need one of these variables since it is immediately used (not a whole array):

var totalNum = instead of var totalNum[i]

When you access the form using dot notation, the brackets in the name messes that up, you need to do it like this:

document.formNum["txt1["+i+"]"].value instead of document.formNum.txt1[i].value

Vuala

When you make these minor changes, the code you used will actually produce proper results :) See this working demo: http://jsfiddle/69Kj7/ , also, here is a demo with 2 rows: http://jsfiddle/69Kj7/1/

For reference, this is the code in the demo:

html:

<table id="tableNum">    
<form name="formNum" action="" id="formNum">
<tr>
<td><input type="text" name="txt1[0]" onkeyup="calc()"/></td>
<td><input type="text" name="txt2[0]" onkeyup="calc()"/></td>
<td><span id="totalCalc[0]"></span></td>
</tr>
</form>
</table>​

js:

function calc() {
 var table = document.getElementById("tableNum");
 var rowCount = table.rows.length;
 for (var i = 0; i < rowCount; i++) {
  var totalNum = document.formNum["txt1["+i+"]"].value * document.formNum["txt2["+i+"]"].value;
  document.getElementById('totalCalc[' + i + ']').innerHTML = totalNum;
 }
}​

if you wants to work with pure java script and here is the logical code

html

<form name="formNum" id="formNum" action="" >
<input type="text" name="foo[]" onkeyup="calc()" value="5"/>
<input type="text" name="foo[]" onkeyup="calc()" value="12"/>
<span id="totalCalc"></span>
</form>

​

js

var inputs = formNum["foo[]"];
var total = 1;
alert(inputs.length);
for (var i = 0; i < inputs.length; i++) {
    total *= inputs[i].value;
}

alert(total);

working DEMO

I've figured out how to solve the problem. Just insert array after totalCalc, but not within totalCalc.

Thank you guys so much for helping me out :)