jQuery: How to add float values in multiple fields using class name

Question

Using jQuery, I have float values in fields with similar class names "score"and I just want to make a function that will add all float values in those fields and assign the result to "field5".

<input id="field1" type="text" class="score">2.5</input>
<input id="field2" type="text" class="score">6.02</input>
<input id="field3" type="text" class="score">1</input>
<input id="field4" type="text" class="score">4.03</input>
<input id="result" type="text" class="result"></input>

I made the script below but it doesn't work even though the function executes.

$(.score).on('change',function(){
    var total = 0
    $(this).each(function(){
       total += this.value;
  });
});
    $('#result').val(total);
    });

I finally figured it out. Thanks guys! function getResult(){ var total = 0; $('.score').each(function(){ var checkval= parseFloat(this.value); if(!isNaN(checkval)) total += checkval; }); $('#result').val(total.toFixed(2)); } — user4909454
– user4909454, Commented Aug 22, 2015 at 8:15

K K · Accepted Answer · 2015-08-22 05:57:51Z

1

Lot of issues in your code:

JS:

$(".score").on('keyup', function () {
    var total = 0
    $(".score").each(function () {
        total += parseFloat(this.value);
    });
    $('#result').val(total);
});

HTML

<input id="field1" type="text" class="score" value="1"/>
<input id="field2" type="text" class="score" value="1.2"/>
<input id="field3" type="text" class="score" value="1.4"/>
<input id="field4" type="text" class="score" value="3.1"/>
<input id="result" type="text" class="result" value=""/>

Demo: http://jsfiddle.net/GCu2D/839/

input is a self closing tag. You should use it like in this example
You should iterate on $(".score") instead of $(this) to get all input values. Latter will give only the current input's value.
Use parseFloat to convert the string type into float. By default you get string value from the .value. In order to add them, you need to convert them to float
Your selector $(.score) is invalid. Use $(".score") .
$('#result').val(total); should be inside the event handler.

edited Aug 22, 2015 at 5:57

answered Aug 22, 2015 at 5:48

K K

18.2k4 gold badges33 silver badges39 bronze badges

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

2 Comments

ErikE Over a year ago

Not inside the iteration, but inside the event function as you have placed it.

K K Over a year ago

@ErikE. Yeah. Modified it. Thanks

user4909454 · Accepted Answer · 2015-08-22 08:18:07Z

1

I finally figured it out. Thanks guys!

function getResult(){
  var total = 0;

  $('.score').each(function(){
    var checkval= parseFloat(this.value);
    if(!isNaN(checkval)) total += checkval;
  });  
  $('#result').val(total.toFixed(2));
}

answered Aug 22, 2015 at 8:18

user4909454

Comments

Rachitta A Dua · Accepted Answer · 2015-08-22 05:49:02Z

0

First of all, I believe .change() is used with dropdowns. Try using .keydown() to detect a change in an input box.

There are a few errors in your code -

var total = 0;

Semicolon is missing.

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

This will assign the value and will not show it. If you wish to display teh value as well, use

$('#result').append(total);

answered Aug 22, 2015 at 5:49

Rachitta A Dua

3581 silver badge11 bronze badges

Comments

Pratik Solanki · Accepted Answer · 2015-08-22 06:04:05Z

0

$(document).ready(function(){
            $(".score").on('change',function(){
                var total = 0.00;
                $(".score").each(function(){
                    if(undefined != $(this).val() && "" != $.trim($(this).val()))
                        total += parseFloat($(this).val());
                });
                $('#result').val(total);
            });

        });

answered Aug 22, 2015 at 6:04

Pratik Solanki

524 bronze badges

Collectives™ on Stack Overflow

jQuery: How to add float values in multiple fields using class name

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related