I have a form where there is a field named input_total, which is locked so that its value cannot change.
And another input group which have a min and max value by default.
When any input is changed, I am capturing the sum of the inputs and I want validate that the result is not greater than the input_total
I am trying to validate each input to change the max value depending on the amount remaining, but at no time is the max value greater than the default max value of each input.
This way I try to do any combination in the sum of the inputs but that the result of the sum is never greater than the input_total.
How can I validate or set the max value of each input on change any of the values? For example, if the input_total value is greater than the sum of the inputs, that I can change the max value of any input if the default max value allows it.
This is my code:
// On input sum the input values and determine if there are cents left to equal the value of input_total and set the new max value for each input, preventing that is less than or equal to the placeholder attribute.
function sumar() {
var input_total = $("#input_total").val();
var suma = 0;
for (i = 1; i <= 3; i++) {
var payment = $("#" + i + "monto").val();
var max_default = 0;
max_default = $("#" + i + "monto").attr("placeholder");
suma = parseFloat(suma) + parseFloat(payment);
if (suma > input_total) {
$("#" + i + "monto").prop("max", "0.00");
} else {
$("#" + i + "monto").prop("max", max_default);
}
}
$("#paying").html("Paying: $" + suma + " of $" + input_total);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- This is the maximum value to sum -->
<input name="input_total" id="input_total" value="365.00" readonly="readonly" />
<!-- The sum of these inputs must not be greater than 365.00 (#input_total value) -->
<input name="1monto" id="1monto" value="187.00" placeholder="187.00" max="187.00" oninput="sumar()" />
<input name="2monto" id="2monto" value="177.97" placeholder="178.00" max="177.97" oninput="sumar()" />
<input name="3monto" id="3monto" value="0.03" placeholder="206.00" max="0.03" oninput="sumar()">
<h4 id="paying"></h4>Have a go with this.
I set the default value to last allowed value and removed the max from the imputs
// On input sum the input values and determine if there are cents left to equal the value of input_total and set the new max value for each input, preventing that is less than or equal to the placeholder attribute.
$(function() {
const $fields = $("[name$=monto]");
const getSum = () => $fields.map(function() { return +this.value }).get().reduce((a, b) => a + b);
const input_total = $("#input_total").val();
$fields.on("input", function(e) {
let suma = getSum()
if (suma > input_total) this.value = this.defaultValue
else this.defaultValue = this.value
suma = getSum()
$("#paying").html("Paying: $" + suma + " of $" + input_total);
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- This is the maximum value to sum -->
<input name="input_total" id="input_total" value="365.00" readonly="readonly" style="border:0" />
<!-- The sum of these inputs must not be greater than 365.00 (#input_total value) -->
<input name="1monto" id="1monto" value="187.00"/>
<input name="2monto" id="2monto" value="177.97"/>
<input name="3monto" id="3monto" value="0.03" />
<h4 id="paying"></h4>