Dynamic add value on keyup function in jQuery

Question

Check my fiddle here JSFiddle. I have different id and class and i want to add the dynamically values.while key up I wanna add values dynamically in the total field

I have 3 inputs with ids InvQty1, InvQty2 and InvQty3 and an input with id Total

$(document).ready(function(){
    $('.InvQty').keyup(function(){

       var val2 =  parseInt($('#InvQty1').val())+parseInt($('#InvQty2').val());
        
        $('#Total').val(val2);
    });
});

Any help really appreciated !

Please be more clear in what you want to achieve.

Shaeldon
– Shaeldon

2014-11-06 10:34:07 +00:00
Commented Nov 6, 2014 at 10:34 — Shaeldon
– Shaeldon, Commented Nov 6, 2014 at 10:34

Syscall · Accepted Answer · 2021-04-03 16:56:29Z

2

Check out this JSFiddle Link

$(document).ready(function(){
    $('.InvQty').keyup(function(){

       var val2 = 0;
       $("input[id^='InvQty']").each(function()
       {
           if($(this).val().length != 0)
           {
       val2 = val2 + parseFloat($(this).val())  // need to parse int and float avoiding NaN
           }
    });
        
        $('#Total').val(val2);
    });
});

edited Apr 3, 2021 at 16:56

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered Nov 6, 2014 at 10:42

Captain Planet

4084 silver badges19 bronze badges

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

1 Comment

Riad Over a year ago

This answer is now perfect as it is using the ID of the field values. It could be accepted as answer.

Bhushan Kawadkar · Accepted Answer · 2014-11-06 10:38:37Z

0

Try this : on keyup, iterate all InvQty input and sum up value to put it total. Use parseFloat() to avoid NaN

$(document).ready(function(){
    $('.InvQty').keyup(function(){

       var val2 = 0;
        $('.InvQty').each(function(){
            val2+=(parseFloat($(this).val()) || 0);
        });
        $('#Total').val(val2);
    });
});

DEMO

answered Nov 6, 2014 at 10:38

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

Sudharsan S · Accepted Answer · 2014-11-06 10:39:44Z

0

Try the below code

$(document).ready(function(){

    $('.InvQty').keyup(function(){
       var res = 0 ; 
        $(".InvQty").each(function() {
            res += parseInt($(this).val());

        });

        $('#Total').val(res);
    });
});

Fiddle

answered Nov 6, 2014 at 10:39

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Comments

Syscall · Accepted Answer · 2021-04-03 16:56:37Z

0

$(document).ready(function(){
    $(document).on('keyup', '.InvQty', function(){
       var val2 = 0;
        //each input where id starts with 'InvQty' (id='InvQty*')
        $('input[id^="InvQty"').each(function(i, el){
            //get int val
            var curVal = parseInt( $(el).val() );
            //if empty input, then we calculate this as zero value
            var curVal = (isNaN( curVal ) ? 0 : curVal );
            //summ
            val2 = val2 + curVal;
        });
        //result
        $('#Total').val(val2);
    });
});

https://jsfiddle.net/52g6v9kq/ - demo

edited Apr 3, 2021 at 16:56

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered Nov 6, 2014 at 11:11

LINKeRxUA

5691 gold badge6 silver badges27 bronze badges

1 Comment

LINKeRxUA Over a year ago

works perfect with INTEGER, if you need to process float values - change parseInt() to parseFloat()

Syscall · Accepted Answer · 2021-04-03 16:56:46Z

0

Here's a solution. You set up the function, then, at every keyup, it gets every element with InvQty class and then get its value and add it to the total. Then it sets it in the total input.

  $('.InvQty').keyup(function(){
        
       var total = 0;
        $('.InvQty').each( function(){
           total += parseFloat($(this).val());
        });
        $('#Total').val(total);
    });

This also work if you add more inputs with InvQty class on it. https://jsfiddle.net/2z4ddh7o/13/

Edit: put parseFloat as suggested by myfunkyside

edited Apr 3, 2021 at 16:56

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered Nov 6, 2014 at 10:37

Michael

3,3345 gold badges27 silver badges37 bronze badges

3 Comments

Bhushan Kawadkar Over a year ago

Your code will produce NaN if I enter any non-numeric value

myfunkyside Over a year ago

@BhushanKawadkar - Yeah, what'd you expect?

myfunkyside Over a year ago

@MichaelZucchetta - You should remove that + however. And use parseFloat() around the values to be safe

Roc Khalil · Accepted Answer · 2014-11-06 10:40:16Z

-1

You need to try this :

$(document).ready(function(){
        $('.InvQty').keyup(function(){
            var Total = 0;
            $('.InvQty').each(function(){
                if(parseInt($(this).val()))
                    Total += parseInt($(this).val());
            });
            $('#Total').val(Total);
        });
    });

The NaN value is appearing because parseInt('') return NaN and not 0.

I hope this will help you !

answered Nov 6, 2014 at 10:40

Roc Khalil

1,3856 silver badges22 bronze badges

2 Comments

Bhushan Kawadkar Over a year ago

You can use parseInt($(this).val()) || 0 to avoid NaN

Roc Khalil Over a year ago

@BhushanKawadkar just edited my code, used if(parseInt($(this).val())) which will return null if it's NaN and won't pass by the code..

Collectives™ on Stack Overflow

Dynamic add value on keyup function in jQuery

6 Answers 6

1 Comment

Comments

Comments

1 Comment

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related