How do I add up the vals of inputs using jquery?

Question

I'm working on a GPA calculator, but I've hit a road block.

Here's how the calculator looks like: http://codepen.io/m6cheung/pen/KdWGxa.

Here is the JS part of it:

var $units = $('.units');
var $grade = $('.grade-select');
var $gpa = $('#gpa');
var sum = 0;

$('.btn').click(function() {
  $('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});

$('.result').hide();

$units.keyup(function() {
  $gpa.text((($grade.val() * $(this).val()) / $(this).val()).toFixed(2));  
});

$grade.change(function() {
    $gpa.text((($units.val() * $(this).val()) / $units.val()).toFixed(2));
    $('.result').show();
});

What I want to know: is there any other way, so I can use jQuery to manipulate further $units and $grade values when I press the Add Course button? For now, it only works for the first set of input values.

would this allow me to add and multiply vals between different inputs? — joyfulchute
– joyfulchute, Commented Oct 6, 2015 at 11:09

Har devgun · Accepted Answer · 2015-10-06 11:50:20Z

2

after adding a new row the keyup and change events are not bind to them.

try using:-

$(document).on('keyup','.units', function() {

and

$(document).on('change','.grade-select', function() {

EDIT from comment

to add them up, create a new function:

function sumScores(){
   var score = 0;
   $('.block').each(function(i, element){
      var unit = $(element).find('.units').val();
      var grade = $(element).find('.grade-select').val();

      // do calculation and add to score

   });

   $gpa.text(score.toFixed(2); 
}

then set that function to the keyup/change handler.

$(document).on('keyup','.units', sumScores);
$(document).on('change','.grade-select', sumScores);

edited Oct 6, 2015 at 11:50

Har devgun

5336 silver badges25 bronze badges

answered Oct 6, 2015 at 11:08

BenG

15.2k5 gold badges48 silver badges62 bronze badges

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

1 Comment

joyfulchute Over a year ago

this is really good, but I also wanted to be able to manipulate the new DOM elements. For example, I wanted to be able to add the input vals together.

lshettyl · Accepted Answer · 2015-10-06 12:01:09Z

Since the inputs are added dynamically, you need to bind events to the closest static parent, such as .outer-box. Binding it to document is bad/costly due to event bubbling. Adding up the inputs is as easy as writing a function that would be called on keyup and change which also eliminates code duplication.

 var $oBox = $('.outer-box'),
    $gpa = $('#gpa'),
    $result = $('.result').hide();

$('.btn').click(function() {
    $('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});

$oBox.on("keyup", ".units", function() {
    $gpa.text(getTotal());
});

$oBox.on("change", ".grade-select", function() {
    $gpa.text(getTotal());
    //Show $result only if it's  hidden
    $result.is(":hidden") && $result.show();
});

//The function I stated above
function getTotal() {
    var sum = 0;  
    //Loop thru the units
    $('.units').each(function() {
        var $this = $(this);
        //You must also check if the entered unit is a number
        //to avoid operating on non-number inputs
        //https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/isNaN
        if ( !isNaN($this.val()) ) {
            //Input vals are always of type string, so, convert them to numbers
            //Multiply the pairs
            sum += parseFloat($this.val()||0) * parseFloat($this.parent().find('.grade-select').val()||0);
        }
    });
    //Format the number
    return sum.toFixed(2);
}

Your updated pen

Lucman Abdulrachman · Accepted Answer · 2015-10-06 11:39:43Z

I noticed the beginning of your code starts with: var $units = $('.units');

And your inputs are dynamically generated by cloning.

One reason why your computation only works at first input is because $input only points to the fist input, same with $grade.

Maybe you are expecting that $input will automatically take other input as they are cloned. It is not the case. It does not work like CSS rules. You need to re-execute the line for every clone like this:

$('.btn').click(function() {
  $('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
  $units = $('.units');
  $grade = $('.grade-select');
});

To manipulate all values you need to loop all elements like this:

var sum = 0;
for (var n = 0; n < $units.length; n++) {
    sum += 1 * $($units[n]).val();//1 * -> is for assurance it adding not concat
    //to retreive $grade use $($grade[n]).val()
}

Collectives™ on Stack Overflow

How do I add up the vals of inputs using jquery?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related