current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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.

share|improve this question
    
NO id with tableNum in Question, form id is formNum –  diEcho Jan 2 '13 at 6:46
3  
what do you want? you code makes no sense. –  xiaoyi Jan 2 '13 at 6:53
    
Can you use Jquery, It will be fast and efficient. –  ankur Jan 2 '13 at 6:53
    
after edit: still your HTML is completely wrong/ where is tr td? –  diEcho Jan 2 '13 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 Jan 2 '13 at 7:12

4 Answers 4

up vote 0 down vote accepted

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 :)

share|improve this answer
    
Thanks you guys for your suggestions and examples :) –  Lorek Bryanson Jan 5 '13 at 6:00
up vote 0 down vote

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

share|improve this answer
up vote 1 down vote

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.net/69Kj7/ , also, here is a demo with 2 rows: http://jsfiddle.net/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;
 }
}​
share|improve this answer
    
I'm actually working on a demo which the table row number is defined by user, by clicking insert row button. Do you have other example for indices reference which I don't have to define indices manually? Thanks. –  Lorek Bryanson Jan 2 '13 at 7:46
    
Thanks for your demo, after changing the code to yours, the code is working fine. 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. –  Lorek Bryanson Jan 3 '13 at 1:07
    
+1 for using your own version of "voila" –  Vincent May 16 at 15:47
up vote 1 down vote

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.

share|improve this answer
    
Thanks for letting me know. Do you mind telling me where I've done wrong? totalNum is not an array in this case? Thanks. –  Lorek Bryanson Jan 2 '13 at 7:09
    
Check your own following line which says document.getElementById('totalCalc[' + i + ']').innerHTML = totalNum; and here totalnum isn't used as array!@ –  Rana Jan 2 '13 at 7:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.