auto calculate sum when hide and show input element

done by Joe

by Joe

HTML

<!-- dropdown 1 -->
<div class="row">
  <!-- input 1 -->
  <div class="form-group col-4">
    <label class="col-sm-12 control-label p-sm-0 input-group">Input 1 </label>
    <input type="number" id="paydeb" min="0" name="inp" placeholder='Input 1' data-action="sumDebit" class="form-control tdsTot allignAmt" onkeypress="restrictMinus(event);" />
  </div>
  <!-- input 2 -->
  <div class="form-group col-4">
    <label class="col-sm-12 control-label p-sm-0 input-group">Input 2 </label>
    <input type="number" class="form-control sumTot deb allignAmt" id="cashdeb' + counter + '" min="0" data-action="sumDebit" name="inp" placeholder="Input 2" onkeypress="restrictMinus(event);" required />
  </div>
</div>



<!-- total -->
<div class="row">
  <div class="form-group col-4">
    <label class="col-sm-12 control-label p-sm-0 input-group">Total </label>
    <input type="number" class="totaldeb tdsTtl allignAmt" id="totaldbt" name="total" placeholder="Total" tabindex="-1" readonly>
  </div>
</div>

<div class="form-group col-4">
  <label class="col-sm-12 control-label p-sm-0 input-group">Bill type </label>
  <select class="form-control selectsch_items required" name="billtype" id="cashbill">
    <option value="">Choose an items</option>
    <option value="RW">1 kg</option>
    <option value="SP">2 kg</option>
    <option id="othr_bill" value="OT">Others</option>
  </select>
</div>

JavaScript

$(function() {
  $('#tds_tx').hide();
  $('#cashbill').change(function() {
    var text = $(this).children("option:selected").text();
    evaluateTotal();
    (text == "1 kg" || text == "2 kg") ? $('#paydeb').hide().val(): $('#paydeb').show().val('')
    $('#paydeb').val('');
    evaluateTotal();
  });
});

/* total */
$('body').on('keyup', '[data-action="sumDebit"]', function() {
  evaluateTotal();
});


function evaluateTotal() {
  var total = 0;
  $('[data-action="sumDebit"]').each(function(_i, e) {
    var val = parseFloat(e.value);
    if (!isNaN(val))
      total += val;
  });
  $('#totaldbt').val(total);
}