auto compute of <input> using the 'class='classname'' using jquery

Question

Can some one help me, i need to compute 'AUTOMATICALLY' <input> that has the same class= and output into another <input id=>, this is what i've tried so far

$('.debit').change(function(e)  {
    var total = 0;
    total +=  parseFloat(this.value);
    $('#total').val(total);
});

if someone input a data on <input> it will automatically output the sum to another <input> — Paul
– Paul, Commented May 13, 2015 at 5:55
<input type='text' name='debit' class='debit' id='debit"+x+"' placeholder='debit' style='width:60px'> — Paul
– Paul, Commented May 13, 2015 at 5:55
<input readonly type='text' name='total_debit_text' id='total' style='width: 60px'> — Paul
– Paul, Commented May 13, 2015 at 5:56

Norlihazmey Ghazali · Accepted Answer · 2015-05-13 06:09:58Z

1

Try this code, get all input with .debit class name using .each like so :

$('.debit').change(function (e) {
  var total = 0;
  $('.debit').each(function(){
     var myValue = $(this).val() ? $(this).val() : 0;
     total += parseFloat(myValue);
  });      
  $('#total').val(total);
});

//or use keyup

$('.debit').keyup(function (e) {
   var total = 0;   
   $('.debit').each(function(){
     var myValue = $(this).val() ? $(this).val() : 0;
     total += parseFloat(myValue);
   });      
   $('#total').val(total);
});

DEMO

p/s : it could be better if you use .keyup instead of change.

edited May 13, 2015 at 6:09

answered May 13, 2015 at 5:59

Norlihazmey Ghazali

9,0701 gold badge26 silver badges42 bronze badges

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

1 Comment

Norlihazmey Ghazali Over a year ago

@Paul : Nan because there is no initial value for input. You should see the Tushar answer

Tushar · Accepted Answer · 2015-05-13 06:00:18Z

0

Try this:

$('.debit').on('keyup', function (e) {
    var total = 0;
    $('.debit').each(function () {
        total += parseFloat($(this).val()) || 0;
    });

    $('#total').val(total);
});

Demo: https://jsfiddle.net/tusharj/rvba2r2o/1/

edited May 13, 2015 at 6:00

answered May 13, 2015 at 5:56

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Collectives™ on Stack Overflow

auto compute of <input> using the 'class='classname'' using jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related