如何使用javascript实时显示foreach内部数组输入的总数

我有这种形式,处于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>

总计不显示。

idarkness 回答:如何使用javascript实时显示foreach内部数组输入的总数

<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>
本文链接:https://www.f2er.com/3139830.html

大家都在问