How to add value with attribute name="data[]" and put result to input with attribute name="total_data"?

When type input in data 1, data 2 etc, the result will appear in total data with additional. If I type value 1 in data 1 and type value 3 in data 2, total data will show value 4. How to do that?

<input name="data[]" type="number" class="input-data" value="" placeholder="data 1" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 2" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 3" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 4" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 5" /><br><br>
<input name="total_data" type="number" class="input-data" value="" placeholder="Total Data" />

How to add value with attribute name="data[]" and put result to input with attribute name="total_data"?

When type input in data 1, data 2 etc, the result will appear in total data with additional. If I type value 1 in data 1 and type value 3 in data 2, total data will show value 4. How to do that?

<input name="data[]" type="number" class="input-data" value="" placeholder="data 1" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 2" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 3" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 4" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 5" /><br><br>
<input name="total_data" type="number" class="input-data" value="" placeholder="Total Data" />

• javascript
• jquery

• 3 Sum a list of text boxes in jQuery and jQuery calculate sum of values in all text fields – Tushar Commented Apr 4, 2017 at 4:39

4 Answers 4

You can do it like below:-

$('input[name="data[]"]').change(function(){
  var total = 0;
  $('input[name="data[]"]').each(function(){
     if($(this).val() !==''){
        total +=parseInt($(this).val());
      }
    
  });
  $('input[name="total_data"]').val(total);

});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 1" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 2" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 3" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 4" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 5" /><br><br>
<input name="total_data" type="number" class="input-data" value="" placeholder="Total Data" />

Note:- you can use keyup() also instead of change().

Try the following way:

$('.input-data').change(function(){
    var inputs = document.querySelectorAll('.input-data');
    var total = 0;
    inputs.forEach(function(node, index){
        if(node.value != ""){
            total += parseInt(node.value);
        }
    });
    document.getElementsByClassName('input-data-total')[0].value = total;
  })

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name="data[]" type="number" class="input-data" value="" placeholder="data 1" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 2" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 3" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 4" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 5" /><br><br>
<input name="total_data" type="text" class="input-data-total" value="" placeholder="Total Data" />

Use a jquery function as below and call this function onchange event of data[] inputs. Code is written from memory and not tested

function doTotal(){
    var total=0;
    $("input[name='data[]']").each(function(){
       total+=$(this).val(); 
    });

    $("input [name='totalData']").val(total);
}

According to jQuery documentaion kaypress you can do it by every key press.

$('input[name="data[]"]').keypress(function(){
  var sum = 0;
  $('input[name="data[]"]').each(function(){
     if($(this).val() !==''){
        sum +=parseInt($(this).val());
      }

  });
  $('input[name="total_data"]').val(sum);

});