HTML array multiply javascript

Question

HTML code

<input name="itemCode[]" value="" class="tInput" id="itemCode" tabindex="1"/> </td>
<input name="itemDesc[]" value="" class="tInput" id="itemDesc"  readonly="readonly" /></td>
<input name="itemQty[]" value="" class="tInput" id="itemQty" tabindex="2" onchange="multiply(this)"/></td>
<input name="itemPrice[]" value="" class="tInput" id="itemPrice" readonly="readonly" /> </td>

Javascript code

function multiply(el) {
   var i= el.value * document.getElementById('itemPrice').value;
   document.getElementById('itemPrice').value =i;
}

Problem is this: the first row in the table multiplies correctly but the second row doesn't work....please help

How do you know that the first row is correct while the second one is incorrect? — irrelephant
– irrelephant, Commented Aug 12, 2012 at 12:10
IDs must be unique! Search for it, this has been explained so many, many times. — Felix Kling
– Felix Kling, Commented Aug 12, 2012 at 12:11
You don't show an element with id of "item", so the first line of the function won't work. And further to what Felix said, this seems to be in a table row, so if you've repeated that on many rows with the same ids repeated it won't work properly - .getElementById() will return only the first one (or, for certain browsers, possibly the last one). — nnnnnn
– nnnnnn, Commented Aug 12, 2012 at 12:13
are you missing every opening <td> from the real markup too? — jbabey
– jbabey, Commented Aug 12, 2012 at 12:17

Cranio · Accepted Answer · 2012-08-12 12:20:19Z

1

Problem is that you cannot identify the row correctly with itemXxxxx alone. It's better to use some id to identify the "row" you are referring to.

For example something like (for every row, in this case row/item no. 23):

<input id="price23" .....>
<input id="qty23" ......>
<input id="total23" onchange="calc(23);" ...>

function calc(id) is:

function calc(id)
{

     var p = document.getElementById("price"+id).value;
     var q = document.getElementById("qty"+id).value;
     document.getElementById("total"+id).value = p * q;
}

It is easy to inject row number from some serverside code.

Edit: Another option would be using JQuery with some DOM traversals between parents and siblings to get the desired values.

edited Aug 12, 2012 at 12:20

answered Aug 12, 2012 at 12:15

Cranio

9,8764 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1593373 Over a year ago

but i dont know how many row will b there it is some thing like this codemashups.com/source/jquery/jquery-autocomplete-p1

Collectives™ on Stack Overflow

HTML array multiply javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related