Quiero verificar el precio total y el precio de recepción de la entrada del usuario, cuyo precio de recepción no debe ser mayor que el precio total.
digamos ejemplo, en el archivo html, tengo 3 cuadros de entrada. la casilla A obtiene el valor del precio total, la casilla B obtiene el valor de recibir el pago mediante tarjeta y la casilla C obtiene el valor de recibir el pago en efectivo. el cuadro B + el cuadro C no debe ser mayor que el cuadro A. Necesito validarlo y dejar de enviarlo.
si A >= B+C : permitiendo enviar el formulario
si A <B+C: no debería permitir enviar el formulario, debe mostrar un mensaje de error como "El valor de recepción es mayor que el valor total"
Puede ser muy simple, ya que soy nuevo en JS, lo publico aquí.
A continuación se presenta una posible forma de lograr el objetivo deseado.
Fragmento de código
// 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>Explicación
Se agregaron comentarios en línea al fragmento anterior.