[FIXED] How to validate simple arithmetic calculation in JS for webpage?

Issue

I want to check total price and receiving price of user input which receiving price shouldn't be more than total price.

say example, in html file, I do have 3 input box. box A getting value of total price, box B getting value of receiving payment through card and box C getting value of receiving payment by cash. box B + box C should not greater than box A. I need to validate it and stop submitting it.

if A >= B+C : allowing to submit the form

if A < B+C : Should not allow to submit form, need to show error message like "Receiving value is more than Total Value"

It may very simple, since I am new to JS I posting it here.

Solution

Presented below is one possible way to achieve the desired objective.

Code Snippet

// access the button from the html
const btn = document.getElementById("btnSubmit");

// access input boxes A, B, C
const [boxA, boxB, boxC] = [
  document.getElementById("boxA"),
  document.getElementById("boxB"),
  document.getElementById("boxC"),
];

// a generic method to validate if prices indicate
// that 'submit' button should be disabled
// as well as render an error notification
const validatePrices = () => {
  btn.disabled = (
    +boxA.value < +boxB.value + +boxC.value
  );
  document.getElementById("error").innerText = (
    +boxA.value < +boxB.value + +boxC.value
    ? 'Sum of Card Payment and Cash Payment exceeds Total Cost'
    : ''
  );
};

// add event-listener to each input to invoke the validate method
[boxA, boxB, boxC].forEach(
  box => box.addEventListener('keyup', validatePrices)
);

// a placeholder 'click' action handler for the 'submit' button
btn.addEventListener(
  'click', () => alert(
    `
      Valid prices received !
      Cost: ${boxA.value}
      Card payment: ${boxB.value}
      Cash payment: ${boxC.value}
    `
  )
);

.error-text {
  font-size: 14px;
  color: red;
  margin-top: 15px;
 }

<label for="boxA">Total Cost: </label><input id="boxA" type="number"/><br/>
<label for="boxB">Card Payment: </label><input id="boxB" type="number"/><br/>
<label for="boxC">Cash Payment: </label><input id="boxC" type="number"/><br/>
<div id="error" class='error-text'></div><br/><br/>
<button id="btnSubmit">Submit</button>

Explanation

Inline comments added to the snippet above.

Answered By - jsN00b

Answer Checked By - Timothy Miller (PHPFixing Admin)