jquery bootstrapValidator : sum of multiple input values and if not equal other input fileds disable submit button

Question

I have two input filed categories. the div class total_investement_expenses class has 4 input fields. each has a class pr and the second div class source_income has two input fields and each has a class name called prc.

 $('.source').on('input','.prc',function(){
            totalSum=0;
            $('.source .prc').each(function(){
                var inputVal = $(this).val();
                if($.isNumeric(inputVal)) {
                    totalSum += parseFloat(inputVal);
                }
            })
            $('#sourceSum').text(totalSum);
        });
        // console.log(totalSum+" self_inital and loan values");
        $('.expense').on('input','.pr',function(){
            var totalExpense=0;
            $('.expense .pr').each(function(){
                var inputVal = $(this).val();
                if($.isNumeric(inputVal)) {
                    totalExpense += parseFloat(inputVal);
                }
            })
            $('#totalExpense').text(totalExpense);
        });
 $('form[data-toggle="validator"]').bootstrapValidator();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<div class="total_investement_expenses">

  <div class="form-group expense">

    <label for="land_expenses">Land Expenses</label><input type="text" name="land_expenses" value=""  class="form-control pr" id="land_expenses" required="required" placeholder=""  />

  </div>

  <div class="form-group expense">
   <label for="equipment_machinery">Equipment Machinery</label>           <input type="text" name="equipment_machinery" value=""  class="form-control pr" id="equipment_machinery" required="required" placeholder=""  />

 </div>

 <div class="form-group expense">
   <label for="asset_capital">Asset Capital</label>           <input type="text" name="asset_capital" value=""  class="form-control pr" id="asset_capital" required="required" placeholder=""  />

 </div>
 <div class="form-group expense">
  <label for="working_capital">Working Capital</label>        <input type="text" name="working_capital" value=""  class="form-control pr" id="working_capital" required="required" placeholder=""  />

</div>
<div class="form-group">
  <label>Total</label> <span id="totalExpense"></span>

</div>

</div>

<div class="source_income" >

  <div class="form-group source">
   <label for="self_inital">Own Equity</label>
   <input type="text" name="self_inital" value=""  class="form-control prc" id="self_inital" placeholder="" required="required"  />
 </div>

 <div class="form-group source">
   <label for="loan">Loan</label>       <input type="text" name="loan" value=""  class="form-control prc" id="loan" placeholder=""  />

 </div>
 <div class="form-group">
  <label>Total:</label> <span id="sourceSum">  </span>
</div>

</div>

i can see the sum of both input fields class but my problem is if not equals i want to disable the submit button using a call back.

Answer 1

I'm not sure if I correctly understood your question. However, I've prepared a sample snippet for you just in case if my assumption was right. Well, you have to move your total variables outside from event scope and perform simple check after these events occurs. Smth like:

let totalSum = 0;
let totalExpense = 0;
$('.source').on('input', '.prc', function() {
  totalSum = 0;
  $('.source .prc').each(function() {
    var inputVal = $(this).val();
    if ($.isNumeric(inputVal)) {
      totalSum += parseFloat(inputVal);
    }
  })
  $('#sourceSum').text(totalSum);
  checkSubmitBtn();
});
// console.log(totalSum+" self_inital and loan values");
$('.expense').on('input', '.pr', function() {
  totalExpense = 0;
  $('.expense .pr').each(function() {
    var inputVal = $(this).val();
    if ($.isNumeric(inputVal)) {
      totalExpense += parseFloat(inputVal);
    }
  })
  $('#totalExpense').text(totalExpense);
  checkSubmitBtn();
});
//$('form[data-toggle="validator"]').bootstrapValidator();
checkSubmitBtn();


function checkSubmitBtn() {
  $('#submitBtn').prop('disabled', totalExpense != totalSum || (totalSum == 0 || totalExpense == 0));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</div>
<div class="form-group expense">
  <label for="working_capital">Working Capital</label> <input type="text" name="working_capital" value="" class="form-control pr" id="working_capital" required="required" placeholder="" />

</div>
<div class="form-group">
  <label>Total</label> <span id="totalExpense"></span>

</div>

</div>

<div class="source_income">

  <div class="form-group source">
    <label for="self_inital">Own Equity</label>
    <input type="text" name="self_inital" value="" class="form-control prc" id="self_inital" placeholder="" required="required" />
  </div>

  <div class="form-group source">
    <label for="loan">Loan</label> <input type="text" name="loan" value="" class="form-control prc" id="loan" placeholder="" />

  </div>
  <div class="form-group">
    <label>Total:</label> <span id="sourceSum">  </span>
  </div>

  <input type='button' value='Submit' id='submitBtn' />

</div>