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.
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.