JQuery multiple input fields of each row keyup function not working

Question

Hello I am trying to make my jquery code in working order but its not working at all, I don't know whats a problem behind it but it contains multiple text boxes in multiple rows, each row calculates its own sum

Here is Fiddle link

Here is my Code

$(document).ready(function(){
$('.employee input[type="text"]').keyup(function() {
        var basic_salary = parseInt($('input[name^=txtMonthlyRate]').val());
        var advance_salary = parseInt($('input[name^=txtAdvance]').val());
        var recover_comm = parseInt($('input[name^=txtRecovery]').val());
        var sales_comm = parseInt($('input[name^=txtSales]').val());
        var deduction_salary = parseInt($('input[name^=txtDeduction]').val());
        var adjustment_salary = parseInt($('input[name^=txtAdjustment]').val());
        var total_sum = ((basic_salary+recover_comm+sales_comm) - (deduction_salary + advance_salary)) + adjustment_salary;
        $('input[name^=txtTotal]').val(total_sum);
        console.log(total_sum)
); 
});

You're running that on .employee keyup, I don't see that class in your markup — Rick Calder
– Rick Calder, Commented Apr 30, 2017 at 21:42
opps sorry i forgot to update that here you go, I updated my fiddle on this link https://jsfiddle.net/rte00jn4/3/ — Rtra
– Rtra, Commented Apr 30, 2017 at 21:45

JasonBoss · Accepted Answer · 2017-04-30 23:40:57Z

3

The txtSales1, txtDeduction1, txtAdjustment1 variables are camel cased in your javascript, but not on the html input name. So these return NaN.

UPDATE Also, you need to set the context of what you're referring to using the second parameter of a selector function:

$('.employee input[type="text"]').keyup(function(e) { 
    var $scope = $(this).closest('.employee');
    var basic_salary = parseInt($('input[name^=txtMonthlyRate]', $scope).val());
    var advance_salary = parseInt($('input[name^=txtAdvance]', $scope).val());
    var recover_comm = parseInt($('input[name^=txtRecovery]', $scope).val());
    var sales_comm = parseInt($('input[name^=txtSales]', $scope).val());
    var deduction_salary = parseInt($('input[name^=txtDeduction]', $scope).val());
    var adjustment_salary = parseInt($('input[name^=txtAdjustment]', $scope).val());
    var total_sum = ((basic_salary+recover_comm+sales_comm) - (deduction_salary + advance_salary)) + adjustment_salary;
    $('input[name^=txtTotal]', $scope).val(total_sum); 
});

edited Apr 30, 2017 at 23:40

answered Apr 30, 2017 at 21:52

JasonBoss

3212 silver badges6 bronze badges

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

7 Comments

Rick Calder Over a year ago

Yup. When you run into things like this console.log your variables, if they aren't returning what you expect then look at the inputs and js and make sure they match.

Rtra Over a year ago

I tried to make it working and it works but the only problem is instead of calculating the sum in its relative total field it updates all the fields

Rtra Over a year ago

Can you please test the this fiddle now jsfiddle.net/rte00jn4/4 I made it working but it only works with the first row and secondly it updates the total fields of all rows with same value I only need to fix it but i can't

funcoding Over a year ago

it's because you're doing this ('input[name^=txtTotal]').val(total_sum);

JasonBoss Over a year ago

I've updated my answer to reflect the fact that you need to scope what you're referring to using the second parameter of the selector function.

|

funcoding · Accepted Answer · 2017-04-30 22:51:16Z

0

The txttotal1 needs to be changed to txtTotal1 The fiddle needs a closing }

answered Apr 30, 2017 at 22:51

funcoding

9017 silver badges12 bronze badges

1 Comment

Rtra Over a year ago

can you please preview the updated link and help me to fix in your second last comment

Collectives™ on Stack Overflow

JQuery multiple input fields of each row keyup function not working

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related