How to add the previous balance to the current balance using javascript

johnerick cuizon :

Php

<div class="col-md-2">
        Amount<input type="text" name="edit_amount" id="edit_amount" class="form-control" onkeypress="isInputNumber(event)"/>
        </div>


        <div class="col-md-2">
        Cash Tendered</strong>: <input type="text" name="edit_payment" id="edit_payment" class="form-control"onkeypress="isInputNumber(event)"/>
        </div>
         <div class="col-md-2">
       Change </strong>: <input type="text" name="edit_change" id="edit_change"readonly="" class="form-control"/>
        </div>

         <div class="col-md-2">
        Balance</strong>: <input type="text" name="edit_balance" id="edit_balance"readonly="" class="form-control" value="<?php echo $row['balance'] ?>" />
        </div>

This row balance is the balance of last transaction of patient. This echo balance to see/check the remaining balance of patient.

Javascript

$(function() {

    $("#edit_payment").on("keydown keyup", sum);
 function sum() {

    var textValue1 = Number.parseFloat(document.getElementById('edit_payment').value);
    var textValue2 = Number.parseFloat(document.getElementById('edit_amount').value);
   if (textValue1>=textValue2) {
    document.getElementById('edit_balance').value = "0"; 
    document.getElementById('edit_change').value = textValue1 - textValue2; 
   }
    else if(textValue1<textValue2){
      document.getElementById('edit_change').value = "0"; 
      document.getElementById('edit_balance').value = textValue2 - textValue1; 

    }
 }

});

My Problem is I want if the patient transacts again and the patient will have another balance i want to add the previous balance and the Current Balance.

For Example,

The Patient Has $100 on the previous balance in the last transaction Then the patient will transact again and the total amount of transaction is $200 then the patient pays $50 so that the balance is $150. Then the total balance of that patient is will become $250 because of $100 of the previous then $150 for current..

bravemaster :

Two problems in your code:

• isInputNumber was bound to #edit_payment so the jQuery callback won't work correctly.
• If you want to decrease balance on every keyup event, you have to store the first balance($row['balance']) somewhere before event listeners.

const parseNumber = function(value) {
   value = parseFloat(value);
   if (isNaN(value)) {
      value = 0;
   }
   return value;
}
const balanceInput = $("#edit_balance");
const paymentInput = $("#edit_payment");
const balance = parseNumber(balanceInput.val());
$("#edit_payment").on("keyup", function() {
  let tmpBalance = balance;  
  let amount = parseNumber(paymentInput.val());
  if (tmpBalance >= amount) {
     tmpBalance = tmpBalance - amount;
  }
  balanceInput.val(tmpBalance);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
        Amount<input type="text" name="edit_amount" id="edit_amount" class="form-control" />
        </div>


        <div class="col-md-2">
        Cash Tendered</strong>: <input type="text" name="edit_payment" id="edit_payment" class="form-control"/>
        </div>
         <div class="col-md-2">
       Change </strong>: <input type="text" name="edit_change" id="edit_change"readonly="" class="form-control"/>
        </div>

         <div class="col-md-2">
        Balance</strong>: <input type="text" name="edit_balance" id="edit_balance"readonly="" class="form-control" value="40" />
        </div>