CODEWITHSUNDEEP
javascriptphpjqueryhtml
user4671040
user4671040

Reputation:

How to total the values of textbox having same class and put it inside the another textbox using jquery

How can i total the value of all textbox having class 1 , 2 and 3 and put it inside sum_1, sum_2 and sum_3

I tried with this way

Jquery here : 

   $(document).on("change", ".1", function() {
    var sum = 0;
    $(".1").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});

HTML here :

<input type="text" class="1" value="1" />
<input type="text" class="2" value="2" />
<input type="text" class="3" value="5" />

Here is the fiddle http://jsfiddle.net/5gsBV/36/ which works good for one value

But how can i do this for 3 values like i asked in the question which is given in this fiddle http://jsfiddle.net/vL6f2tow/1/

Update :

And how can i get those values of sum in a total

Upvotes: 1

Views: 1293

Answers (3)

Dhiraj
Dhiraj

Reputation: 33618

If you want to do it on load you should probably do something like this 

$('.item').each(function(){
    var itemNumber = $(this).attr('class').split(" ");
    itemNumber.splice( itemNumber.indexOf("item"), 1 );
    var sumElement = $(".sum_" + itemNumber);
    var sum = (sumElement.val() == "") ? 0 : parseInt(sumElement.val());
    sum += parseInt($(this).val());
    sumElement.val(sum);
});

Here is a demo to calculate local sums

If you want to calculate a global sum (sum of local sums) here is a demo 2

If you have multiple of such group of inputs then you have to add a class to each of these inputs so that you know which input elements you need to consider to calculate the sum for.

<input type="text" class="item 1" value="1" />
<input type="text" class="item 2" value="2" />
<input type="text" class="item 2" value="3" />
<input type="text" class="item 2" value="4" />
<input type="text" class="item 3" value="5" />
<input type="text" class="item 3" value="6" />
<input type="text" class="item 3" value="7" />
<br>
<br>
<input type="text" class="sum_1" value="" />
<input type="text" class="sum_2" value="" />
<input type="text" class="sum_3" value="" />



 $(document).on("change", ".item", function () {
    var sum = 0;
    var itemNumber = $(this).attr('class').split(" ");
    itemNumber.splice( itemNumber.indexOf("item"), 1 );
    $('.'+itemNumber).each(function () {
        sum += parseInt($(this).val());
    });
    $(".sum_" + itemNumber).val(sum);
});

In the above script,

  1. $(this).attr('class') will looks like "item 1"

  2. $(this).attr('class').split(" ") will be an array ["item", "1"]

  3. Then i'm removing the word item and using that "1"

Here is a demo

Hope this helps.

Upvotes: 3

cb0
cb0

Reputation: 8613

As stated by mayanktum you forgot to add jQuery. Also in the last line you mistakenly named the selector $(".sum1") instead of $(".sum_1");. After that all works fine.

$(document).on("change", ".1", function() {
    var sum = 0;
    $(".1").each(function(){
        sum += +$(this).val();
    });
    $(".sum_1").val(sum);
});

Upvotes: 1

the-catalin
the-catalin

Reputation: 1308

In your second fiddle you referred to $(".sum1") when in fact your class is named sum_1 (not sum1). Also the jQuery library need to be added in jsfiddle

Upvotes: 0

Related Questions