CODEWITHSUNDEEP
javascriptjquery
silvia zulinka
silvia zulinka

Reputation: 731

How to add multiple value in jquery?

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

Upvotes: 2

Views: 7811

Answers (4)

Mahesh
Mahesh

Reputation: 38

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

Upvotes: 1

Ananda G
Ananda G

Reputation: 2539

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

});

Upvotes: 0

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72289

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

Upvotes: 3

Mamun
Mamun

Reputation: 68933

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

Upvotes: 2

Related Questions