How to subtract number from the input box for Grand Total?

Question

Here is my code:

 function credit() { //storing value of grandTotal in txtGrandTotal. var txtGrandTotal = $("#txtGraTot").val(); //here resetting value of grandTotal to 0.00 var txtGraTotal = document.getElementById('txtGraTot').value = '0.00'; //entering deduction amount var txtCredit = document.getElementById('txtCreditAmt').value; //subtracting values var lclRes = (parseFloat(txtGrandTotal) - parseFloat(txtCredit)).toFixed(2); //again storing values to Textbox GrandTotal $("#txtGraTot").val(lclRes); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="txtCreditAmt" oninput="credit();"> <input type="text" id="txtGraTot"> 

The result is not as I expected. If I enter 3 in txtCredit input box then value deducting from the Grand Total is 100 - 3 = 97 . But if I enter the dot(.) again the result is 97 - . = 94 97 - . = 94 . Why it is happening?

Answer 1

I'm not sure if this is what you want, but that should make sense.

Edited

Add the feature that after you press the enter button, calculate and reset txtCreditAmt.

 function credit(){ //subtracting values var lclRes = (parseFloat($("#txtGraTot").val()) - parseFloat($("#txtCreditAmt").val())).toFixed(2); //again storing values to Textbox GrandTotal $("#txtGraTot").val(lclRes); } $('#txtCreditAmt').keypress(function(e){ if (e.keyCode == 13) { credit(); $("#txtCreditAmt").val(''); return false; } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="txtCreditAmt" onblur="credit();"> <input type="text" id="txtGraTot" value="100"> 

Answer 2

The problem is that you are not storing the original value of grand total in a separate variable. So, when the input event fires, it updates the grand total every time. Here's what is going on:

                  Grand total     Credit
Original state:        100          ___
Press 3       :         97           3      oninput invoked, grand total = (100 - 3)
Press .       :         94           3.     oninput invoked, grand total = (97 - 3.)

The quick and easy (but not the ideal) solution is to store the original value of grand total in a separate variable, and use that every time input event fires. My solution is to store that value in a data-total attribute ( $("#txtGraTot").data("total") ) but you can have something else there. Just make sure that you are subtracting from original value, and not from the current value in the text box.

// Save the original value of grand total in an attribute for future use.
if ($("#txtGraTot").data("total") === undefined) {
  $("#txtGraTot").data("total", txtGrandTotal);
} else {
  // else, get the original grand total value.
  txtGrandTotal = $("#txtGraTot").data("total");
}

 function credit(){ //storing value of grandTotal in txtGrandTotal. var txtGrandTotal = $("#txtGraTot").val(); // Save the original value of grand total in an attribute for future use. if ($("#txtGraTot").data("total") === undefined) { $("#txtGraTot").data("total", txtGrandTotal); } else { // else, get the original grand total value. txtGrandTotal = $("#txtGraTot").data("total"); } //here resetting value of grandTotal to 0.00 var txtGraTotal = document.getElementById('txtGraTot').value = '0.00'; //entering deduction amount var txtCredit = document.getElementById('txtCreditAmt').value; //subtracting values var lclRes = (parseFloat(txtGrandTotal) - parseFloat(txtCredit)).toFixed(2); //again storing values to Textbox GrandTotal $("#txtGraTot").val(lclRes); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" id="txtCreditAmt" oninput="credit();"> <br> <input type="text" id="txtGraTot">