Question

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.

Answer 1

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 🙂