How to add multiple value in jquery?

Question

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" />

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

Death-is-the-real-truth · Accepted Answer · 2017-04-04 05:08:57Z

3

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.com/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().

edited Apr 4, 2017 at 5:08

answered Apr 4, 2017 at 4:44

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

silvia zulinka Over a year ago

thanks, thats working very well.. I replace change function to keyup function

Death-is-the-real-truth Over a year ago

@silviazulinka yes you can do that. I have just posted one way to do this. glad to help you

Mamun · Accepted Answer · 2017-04-04 04:59:01Z

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.com/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" />

Paul Sturm · Accepted Answer · 2017-04-04 05:46:03Z

1

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);
}

edited Apr 4, 2017 at 5:46

Paul Sturm

2,1682 gold badges18 silver badges23 bronze badges

answered Apr 4, 2017 at 4:51

Mahesh

385 bronze badges

Comments

Ananda G · Accepted Answer · 2017-04-04 05:28:47Z

0

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);

});

answered Apr 4, 2017 at 5:28

Ananda G

2,55927 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to add multiple value in jquery?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related