计算html中的keypress / keydown / keyup事件

Question

i have 25 rows on a form for user entering the item code in (input tag) and qty (input tag) against that item code in java script calculate the value of that item's quantity and show them in amount (input tag)
The Event fired in the onKeypress/up/down is following

function qtycal() {

    for (i = 1; i <= 25; i++) {

        var quantity_j = document.getElementById("quantity_" + i);
        var price_j = document.getElementById("price_" + i);
        var amount_j = document.getElementById("amount_" + i);

        amount_j.value = price_j.value * quantity_j.value;


    } // end of for

as in this fired on keypress/down/up

the problem is when i typed first digit it not calculate the value and show in amount and after entering second digit event again fired but not multyply whole value of quantity_j with price_j

How to make event so it give exact amount.

The html code

    <table border="1"  align="center">
<thead>
<tr>
<th>#</th>
<th>Item Name</th>
<th>Item Code</th>
<!--<th>Stock</th>-->
<th>Quantity</th>
<th>Price</th>
<!--<th>Discount %</th>
<th>Amount</th>-->
<!--<th>Discount Amount</th>-->
<th>Net Amount</th>
</tr>
</thead>

<tbody>
<?php for($i=1 ; $i<=25 ; $i++) { ?>

<tr>
<th> <?php echo "$i"; ?> </th>
<td><input id="itemName_<?php echo $i; ?>"  onBlur="test()" class="orderInput" type="text" align="center"  ></td>
<td><input id="itemCode_<?php echo $i; ?>"   onBlur="loaditem()"  class="orderInput" type="text" align="center" ></td>
<td><input id="quantity_<?php echo $i; ?>"    onBlur="qtycal()" class="orderInput"  type="text" align="center" ></td>
<td><input id="price_<?php echo $i; ?>" class="orderInput" type="text" align="center"  readonly></td>
<td><input id="amount_<?php echo $i; ?>" class="orderInput" type="text" align="center" readonly ></td>
</tr>

<?php } ?>
</tbody>

<tfoot>
<tr>
<td id="tdTotal" colspan="2" style="font-size:16px"> <b>Totals</b></td>
<td id="totalspace" colspan="3"> </td>
<td><input id="netTotalAll" class="orderInput" type="text" readonly> </td>
</tr>

<button id="addBtn"  ><img src="images/add.png" align="middle"></button>

</tfoot>
</table>

Answer 1

AFAIK you have to bind your function to the keyup to get the actual value.

If that doesn't work you can put a little delay to your function using setTimeout("qtycal", 100). It will not be noted by your users and will make your calculation works.