jQuery sum all values with all having different class

Question

I have created 4 rows every row contains 3 textboxes textbox1 + textbox2 = answer all having different classes at very end there is a textbox which will summ all the textbox values within that row and show the final answer but as of now on the fiddle you can see that on the very last textbox the answer is coming wrong it is adding values instead of sum like if i add 1 and then write 5 it will show answer as 16 instead of 15 I am not good in explaining I hope attached is the fiddle at very bottom of textboxes you can see the answer of all calculation is showing incorrect here is the attached fiddle please have a look

$(document).on('input', '.line48_a, .line48_b', function() {
    var line48_a = parseInt($('.line48_a').val());
    var line48_b = parseInt($('.line48_b').val()) ? parseInt($('.line48_b').val()) : 0;
	var answer = (line48_a + line48_b);
	
	var old_answer1 = parseInt($('.line52_a').val()) ? parseInt($('.line52_a').val()) : 0;
	var new_answer1 = old_answer1 + line48_a;
	$('.line52_a').val((new_answer1 ? new_answer1 : 0 ));
	
	var old_answer2 = parseInt($('.line52_b').val()) ? parseInt($('.line52_b').val()) : 0;
	var new_answer2 = old_answer2 + line48_b;
	$('.line52_b').val((new_answer2 ? new_answer2 : 0 ));
	
    $('.line48_c').val((answer ? answer : 0 ));
});

$(document).on('input', '.line49_a, .line49_b', function() {
    var line49_a = parseInt($('.line49_a').val());
    var line49_b = parseInt($('.line49_b').val()) ? parseInt($('.line49_b').val()) : 0;
	var answer = (line49_a + line49_b);
	
	var old_answer1 = parseInt($('.line52_a').val()) ? parseInt($('.line52_a').val()) : 0;
	var new_answer1 = old_answer1 + line49_a;
	$('.line52_a').val((new_answer1 ? new_answer1 : 0 ));
	
	var old_answer2 = parseInt($('.line52_b').val()) ? parseInt($('.line52_b').val()) : 0;
	var new_answer2 = old_answer2 + line49_b;
	$('.line52_b').val((new_answer2 ? new_answer2 : 0 ));
	
    $('.line49_c').val((answer ? answer : 0 ));
});

$(document).on('input', '.line50_a, .line50_b', function() {
    var line50_a = parseInt($('.line50_a').val());
    var line50_b = parseInt($('.line50_b').val()) ? parseInt($('.line50_b').val()) : 0;
	var answer = (line50_a + line50_b);
	
	var old_answer1 = parseInt($('.line52_a').val()) ? parseInt($('.line52_a').val()) : 0;
	var new_answer1 = old_answer1 + line50_a;
	$('.line52_a').val((new_answer1 ? new_answer1 : 0 ));
	
	var old_answer2 = parseInt($('.line52_b').val()) ? parseInt($('.line52_b').val()) : 0;
	var new_answer2 = old_answer2 + line50_b;
	$('.line52_b').val((new_answer2 ? new_answer2 : 0 ));
	
    $('.line50_c').val((answer ? answer : 0 ));
});

$(document).on('input', '.line51_a, .line51_b', function() {
    var line51_a = parseInt($('.line51_a').val());
    var line51_b = parseInt($('.line51_b').val()) ? parseInt($('.line51_b').val()) : 0;
	var answer = (line51_b + line51_a);
	
	var old_answer1 = parseInt($('.line52_a').val()) ? parseInt($('.line52_a').val()) : 0;
	var new_answer1 = old_answer1 + line51_a;
	$('.line52_a').val((new_answer1 ? new_answer1 : 0 ));
	
	var old_answer2 = parseInt($('.line52_b').val()) ? parseInt($('.line52_b').val()) : 0;
	var new_answer2 = old_answer2 + line51_b;
	$('.line52_b').val((new_answer2 ? new_answer2 : 0 ));
	
    $('.line51_c').val((answer ? answer : 0 ));
});

.table_body > div {
    display: inline-block;
    vertical-align: top;
    width: 15%;
    margin-left: -3px;
    text-align: right;
}

 .table_body > div:nth-child(2) {
    width: 10%;
}

.col-7 {
    padding: 0;
}

.table_head > div:first-child,
.table_body > div:first-child {
    text-align: left;
}

.col-7 {
    width: 60% !important;
}

.table_body {
    height: 40px;
    line-height: 40px;
}

.table_body > div > span {
    display: inline-block;
    vertical-align: top;
}

.table_body > div > span > input {
    width: auto !important;
    display: inline-block;
    margin-left: 1px;
}

.table_body > div > select.form-control {
    padding: 5px;
    width: 50%;
    float: right;
}

.table_body > div > input {
    width: 80%;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<ul>
 <li class="table_body">
				<div class="col-7">Window Cleaning</div>
				<div><input type="text" class="line48_a" name="line48_a" /></div>
				<div><input type="text" class="line48_b" name="line48_b" /></div>
				<div><input type="text" class="line48_c" name="line48_c" value="0.00" readonly /></div>
			  </li>
			  
			   <li class="table_body">
				<div class="col-7">Common Area Cleaning</div>
				<div><input type="text" class="line49_a" name="line49_a" /></div>
				<div><input type="text" class="line49_b" name="line49_b" /></div>
				<div><input type="text" class="line49_c" name="line49_c" value="0.00" readonly /></div>
			  </li>
			  <li class="table_body">
				<div class="col-7">Over-Standard Cleaning</div>
				<div><input type="text" class="line50_a" name="line50_a" /></div>
				<div><input type="text" class="line50_b" name="line50_b" /></div>
				<div><input type="text" class="line50_c" name="line50_c" value="0.00" readonly /></div>
			  </li>
			  <li class="table_body">
				<div class="col-7">Other Non-Variable/Fixed Cleaning Costs</div>
				<div><input type="text" class="line51_a" name="line51_a" /></div>
				<div><input type="text" class="line51_b" name="line51_b" /></div>
				<div><input type="text" class="line51_c" name="line51_c" value="0.00" readonly /></div>
			  </li>
  			  <li class="table_body">
				<div class="col-7">Total Non-Variable Expenses</div>
				<div><input type="text" class="line52_a" name="line52_a" value="0.00" readonly /></div>
				<div><input type="text" class="line52_b" name="line52_b" value="0.00" readonly /></div>
				<div><input type="text" class="line52_c" name="line52_c" value="0.00" readonly /></div>
			  </li>

			</ul>

Please check now I have done

Usman Khan
– Usman Khan

2018-03-21 18:57:37 +00:00
Commented Mar 21, 2018 at 18:57 — Usman Khan
– Usman Khan, Commented Mar 21, 2018 at 18:57

nitsram · Accepted Answer · 2018-03-21 23:20:47Z

1

Bit of an overhaul (sorry) but maybe you could use this instead, is alot cleaner.

EDIT: My choice solution... data attributes:

https://jsfiddle.net/q3L6q3L6/

HTML

 <ul>
 <li class="table_body">
                <div class="col-7">Window Cleaning</div>
                <div><input data-section="window" type="text" data-category="1"  name="window1" /></div>
                <div><input data-section="window" type="text" data-category="2"  name="window2" /></div>
                <div><input data-section="window"type="text"  name="window_total" value="0.00" readonly /></div>
              </li>

 <li class="table_body">
                <div class="col-7">Common area cleaning</div>
                <div><input data-section="common" type="text" data-category="1"  name="common1" /></div>
                <div><input data-section="common" type="text" data-category="2"  name="common2" /></div>
                <div><input data-section="common" type="text"  name="common_total" value="0.00" readonly /></div>
              </li>
              <li class="table_body">
                <div class="col-7">Over-Standard Cleaning</div>
                <div><input data-section="over" type="text" data-category="1"  name="over1" /></div>
                <div><input data-section="over" type="text" data-category="2"  name="over2" /></div>
                <div><input data-section="over" type="text" name="over_total" value="0.00" readonly /></div>
              </li>
              <li class="table_body">
                <div class="col-7">Other Non-Variable/Fixed Cleaning Costs</div>
                <div><input data-section="other" type="text" data-category="1" name="other1" /></div>
                <div><input data-section="other" type="text"  data-category="2" name="other2" /></div>
                <div><input data-section="other" type="text" name="other_total" value="0.00" readonly /></div>
              </li>
              <li class="table_body">
                <div class="col-7">Total Non-Variable Expenses</div>
                <div><input type="text" name="total1" value="0.00" readonly /></div>
                <div><input type="text" name="total2" value="0.00" readonly /></div>
                <div><input type="text" name="total_total" value="0.00" readonly /></div>
              </li>

            </ul>

JQuery

$('[data-section]').on('input', function(){
    var self = $(this),
        section = self.data("section"),
      category = self.data("category"),
      a = parseInt($('[name=' + section + '1]').val()) || 0,
      b = parseInt($('[name=' + section + '2]').val()) || 0,
      c = 0;

 $('[name=' + section + '_total]').val(a + b);
 $('[data-category=' + category + ']').each(function(){
     var me = $(this);
     c += parseInt(me.val()) || 0;
 });
 $('[name=total' + category + ']').val(c);
});

OLDER SOLUTION:

https://jsfiddle.net/099raLxL/4/

$('input').on('input', function(){
    var line = $(this).attr('name').split("_"),
        letter = line.pop(),
        a = parseInt($('.line48_' + letter).val()) || 0,
        b = parseInt($('.line49_' + letter).val()) || 0,
        c = parseInt($('.line50_' + letter).val()) || 0,
        d = parseInt($('.line51_' + letter).val()) || 0,
        e = parseInt($('.' + line + '_a').val()) || 0,
        f = parseInt($('.' + line + '_b').val()) || 0;

    $('.line52_' + letter).val(a + b + c + d);
    $('.' + line + '_c').val(e + f);
});

edited Mar 21, 2018 at 23:20

answered Mar 21, 2018 at 19:09

nitsram

7165 silver badges5 bronze badges

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

7 Comments

Usman Khan Over a year ago

sorry but Total Non-Variable Expenses is comming corect but Window Cleaning and so on third textbox is not adding up this is the main problem where I am stuckk

Usman Khan Over a year ago

Check this out jsfiddle.net/bo7wz8vk/28 I have successded but still single box answer is not coming up

nitsram Over a year ago

Take a look at my updated answer. Hope it helps mate. Good luck.

Usman Khan Over a year ago

wow man you are genious well this couldn't happened with my code ?

nitsram Over a year ago

You will get there mate. If you look at your original code, you do the same thing many time. All you have to do is introduce a variable. Cheers :)

|

Collectives™ on Stack Overflow

jQuery sum all values with all having different class

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related