calculate array javascript for array data from database

Question

I'm stuck for calculate automatically with onchange text box.

I want to calculate with event onchange array input from array database.

HTML :

<td class="text-left"><input type="text" name="nilaia[]" id="nilaia" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="nilaib[]" id="nilaib" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="nilaic[]" id="nilaic" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="nilaid[]" id="nilaid" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="nilaie[]" id="nilaie" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="total[]"  id="total"  readonly="true" class="form-control"></td>

JS :

<script type="text/javascript">
function hitungtotal() {

    var i =  0;  
     while (i <= document.getElementsById('total').length) {

document.getElementById('total').value = parseInt(document.getElementById('nilaia[i]').value) + parseInt(document.getElementById('nilaib[i]').value) + parseInt(document.getElementById('nilaic[i]').value) + parseInt(document.getElementById('nilaid[i]').value) + parseInt(document.getElementById('nilaie[i]').value);

    i++;
}    
}
</script>

why do you overwriting `total` value on each `nilaia` change? — RomanPerekhrest, Jun 08 '16 at 06:39
There is already existing similar question here http://stackoverflow.com/questions/13540751/how-get-total-sum-from-input-box-values-using-javascript — zivklen, Jun 08 '16 at 06:55

score 0 · Answer 1 · answered Jun 08 '16 at 06:44

If you can change your input's name to same name, you can try following code:

HTML:

<td class="text-left"><input type="text" name="nilaia[]" id="nilaia" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="nilaia[]" id="nilaib" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="nilaia[]" id="nilaic" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="nilaia[]" id="nilaid" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="nilaia[]" id="nilaie" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="total[]"  id="total"  readonly="true" class="form-control"></td>

JS:

function hitungtotal(){
    var inputs = document.getElementsByName('nilaia[]');
    var sum = 0;
    for(var i = 0; i<inputs.length; i++){
      sum += parseInt(inputs[i].value);
    }
    document.getElementById('total').value = sum;

  }

fiddle: https://jsfiddle.net/xkuyxbof/

score 0 · Answer 2 · answered Jun 08 '16 at 06:48

try this jquery answer

$('input[id^="nilai"]').change(function(){
         var total = 0;
         $('input[id^="nilai"]').each(function(){
            total+=parseFloat($(this).val());
         });
         $('#total').val(total);
});

https://jsfiddle.net/2d4cvrwz/

score 0 · Answer 3 · answered Jun 08 '16 at 06:58

Try this

<p>A function is triggered when the user is pressing a key in the input field.</p>
<td class="text-left"><input type="text" name="nilai" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="nilai" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="nilai" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="nilai" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" name="nilai" onchange="hitungtotal();" value="0" class="form-control"></td>
<td class="text-left"><input type="text" id="total" readonly="true" class="form-control"></td>

<script type="text/javascript">
function hitungtotal() {
    var elems = document.getElementsByName('nilai');
    var sum = 0;     
    for(var i =0;i<elems.length;i++){
    sum+=parseInt(elems[i].value)
    }
document.getElementById('total').value  = sum;

}
</script>

calculate array javascript for array data from database

3 Answers3