如何使用javascript在foreach中实时显示数组输入的Total

Question

我有一个foreach循环中的表单，要获得金额输入"qty[]"的值，应该乘以"uprice[]"。以及foreach循环之外的最后一个输入，它应该显示所有金额的总和。

<tbody>
<?php foreach($_POST['porder'] as $porder): ?>
<tr>                    
<td>
<input type="text" id="itemnum[]" name="itemnum[]" 
max=999 class="form-control form-control-line">
</td>
<td>
<input type="text" id="code[]" name="code[]" class="form-control form-control-line" 
value="<?php echo $porder ; ?>"readonly>
</td>
<td>
<input style="text-transform:uppercase"  type="text" id="rev" 
name="rev[]" class="form-control form-control-line" required>
</td>
<td>
<input  style="text-transform:uppercase" type="text" id="desc" 
name="desc[]" class="form-control form-control-line" required>
</td>
<td>
<input type="tel" id="qty<?=$porder?>" name="qty[]" min="1" 
class="form-control form-control-line" onkeyup="compute('<?=$porder?>')" required>
</td>
<td>
<input type="tel" id="uprice<?=$porder?>" name="uprice[]" min="1" 
class="form-control form-control-line" onkeyup="compute('<?=$porder?>')" required>
</td>
<td>
<input type="number" id="amount<?=$porder?>" name="amount[]" 
onkeyup="total()" class="form-control form-control-line" >
</td>                                           
</tr>
<?php endforeach ?>                 
<tr >
<td colspan="5" ></td>  
<td><strong>Total
</td>
<td>
<input type="number" id="total" name="total"  class="form-control" >
</td>
</tr>

我尝试使用javascript来显示金额和总额。我只得到金额，没有得到总数。

<script>
function compute(id) {
var txtFirstNumberValue = document.getElementById('qty'+id).value;
var txtSecondNumberValue = document.getElementById('uprice'+id).value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('amount'+id).value = result;
}
}
</script>   

<script>
function total(){
var amount = document.getElementsByName("amount[]");
var total = 0;  
for (var i = 0; i <amount.length; i++) {
var input_value=amount[i];
var signle_value_input = input_value.value;
if(signle_value_input.length!=0)
total +=parseInt(input_value.value);
}
if (!isNaN(total)) {
document.getElementById('total').value = total;
}
}
</script>

Total未显示。

Answer 1

<script>
function total(){
var total = 0;
var amount = document.getElementsByName('amount[]');
for (var i = 0; i <amount.length; i++) {
var inp=amount[i];
var signle_value_input = inp.value;
if(signle_value_input.length!=0)
total +=parseInt(inp.value)
}
if (!isNaN(total)) {
document.getElementById("total").value = total;
}
}

</script>