How to validate simple arithmetic calculation in JS for webpage?-CodePudding

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.

CodePudding user response：

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
const validatePrices = () => {
  btn.disabled = (
     boxA.value <  boxB.value    boxC.value
  );
};

// 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}
    `
  )
);

<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"></div><br/><br/>
<button id="btnSubmit">Submit</button>

Explanation

Inline comments added to the snippet above.