CODEWITHSUNDEEP
javascriptjqueryhtmleach
crazymoin
crazymoin

Reputation: 336

get two input data from each class, multply with each other inside, add them from each and show in a div

What I am trying to do is from every subBlock class, get "a" and "b" input data, multiply them. get data from each subBlock class, add them altogether and show it in "showTotal" id.

here is the html

<div id="mainblock">
<form>
    <div class="subBlock">
        <input class="a" name="a[]"  />
        <input class="b" name="b[]"  />
    </div>
    <div class="subBlock">
        <input class="a" name="a[]"  />
        <input class="b" name="b[]"  />
    </div>
    <div class="subBlock">
        <input class="a" name="a[]"  />
        <input class="b" name="b[]"  />
    </div>
    <div class="subBlock">
        <input class="a" name="a[]"  />
        <input class="b" name="b[]"  />
    </div>
    <div class="subBlock">
        <input class="a" name="a[]"  />
        <input class="b" name="b[]"  />
    </div>
</form>
</div>
<div id="showTotal"></div>

here is javascript/jquery code:

   $(document).on("change", ".subBlock input", function(){
        var totalFinal;
        var subTotal;
        // that = $(this);
        $('#mainblock').find('.subBlock').each(function() {
            subTotal = $(this).find('.a').val() * $(this).find('.b').val();
            totalFinal = totalFinal + subTotal;
        });
        $('#showTotal').html(totalFinal);
   });

I know I am doing something wrong inside each with $(this), Any suggestions, how can I fix it. I searched and tried few codes from other post, but failed every time.

Upvotes: 1

Views: 57

Answers (2)

Soheil
Soheil

Reputation: 99

You should just initialize your variables at first

var totalFinal = 0;
var subTotal = 0;

Upvotes: 0

Tushar
Tushar

Reputation: 87203

  1. You need to initialize the totalFinal variable to zero. Otherwise, by default it's value is undefined and you'll get the result as NaN.
  2. You can use || 0 to set the value of subTotal variable set the value of zero when the values inside the textboxes are not valid numbers. 

$(document).on("input", ".subBlock input", function() {
  var totalFinal = 0,
    subTotal;

  $('#mainblock').find('.subBlock').each(function() {
    subTotal = $(this).find('.a').val() * $(this).find('.b').val() || 0;
    totalFinal = totalFinal + subTotal;
  });

  $('#showTotal').html(totalFinal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="mainblock">
  <form>
    <div class="subBlock">
      <input class="a" name="a[]" />
      <input class="b" name="b[]" />
    </div>
    <div class="subBlock">
      <input class="a" name="a[]" />
      <input class="b" name="b[]" />
    </div>
    <div class="subBlock">
      <input class="a" name="a[]" />
      <input class="b" name="b[]" />
    </div>
    <div class="subBlock">
      <input class="a" name="a[]" />
      <input class="b" name="b[]" />
    </div>
    <div class="subBlock">
      <input class="a" name="a[]" />
      <input class="b" name="b[]" />
    </div>
  </form>
</div>
<div id="showTotal"></div>

Upvotes: 1

Related Questions