How to calculate php for loop values using javascript

Question

I have it's show some values in forloop.i want to calculate those values and add it to textbox.this is my code

<?php
 $itemCount = count($_POST["opt"]);
 for($i=0;$i<$itemCount;$i++) {
        $op_name=$_POST['opt'][$i];
        $price=$_POST['price'][$i];
?>
 <tr>
     <td><input type="text" value="<?php echo $op_name;?>" name="opt" /></td>
     <td><input type="text" value="<?php echo $price;?>" name="price" id="price" style="width: 40px;" onkeyup="order()"/></td>
     <td><input type="text" name="amt" style="width: 40px;" id="amount" onkeyup="order()" /></td>
 </tr>

 <?php
    }
 ?>
Total <input type="text" value="<?php echo $tot;?>" id="tot" />onkeyup="order()"/>

javascript

function order(){
    var price=document.getElementById("price").value;
    var amt=document.getElementById("amount").value;
    var cal_price=1*price;
    var cal_amt=1*amt;
    document.getElementById("tot").value =((cal_price)*(cal_amt));
    }

my code calculate only first row values.i want all Price*ammount total to display in textbox

Answer 1

1. ID needs to be unique.
2. PHP will handle your fields as arrays if you name the fields with [] for example name="price[]" .
3. use document.getElementsByName("price[]") to get a collection of price fields

Like this

 function order() { var prices = document.getElementsByName("price[]"); var amts = document.getElementsByName("amt[]"); var total = 0; for (var i = 0; i < prices.length; i++) { var cal_price = 1 * prices[i].value; // or parseFloat(prices[i].value) var cal_amt = 1 * amts[i].value; // or parseInt(amts[i].value,10) total += cal_price * cal_amt; } document.getElementById("tot").value = total.toFixed(2); } 

 <table> <tr> <td><input type="text" value="" name="opt[]" /></td> <td><input type="text" value="1.5" name="price[]" style="width: 40px;" onkeyup="order()" /></td> <td><input type="text" name="amt[]" style="width: 40px;" onkeyup="order()" /></td> </tr> <tr> <td><input type="text" value="" name="opt[]" /></td> <td><input type="text" value="2.5" name="price[]" style="width: 40px;" onkeyup="order()" /></td> <td><input type="text" name="amt[]" style="width: 40px;" onkeyup="order()" /></td> </tr> <tr> <td><input type="text" value="" name="opt[]" /></td> <td><input type="text" value="3.25" name="price[]" style="width: 40px;" onkeyup="order()" /></td> <td><input type="text" name="amt[]" style="width: 40px;" onkeyup="order()" /></td> </tr> </table> <input type="text" id="tot" />