I run an online store where I offer a box of assorted flavor bagels with a maximum of 12 flavors per box. Each flavor has its own number input field, as seen in the screenshot linked below.
https://i.sstatic.net/eSU09.png
While I have successfully used JavaScript to limit each individual flavor field to a maximum of 12, I am now seeking a way to disable the other input fields once the total quantity across all fields reaches 12.
The current code snippet calculates the sum of all fields but currently only prevents each individual field from exceeding 12.
My goal is to restrict the combined total of all fields to no more than 12, thus completing the box of 12 bagels.
const totalMaxQty = 12;
getAllInputs.forEach(allInputs);
function allInputs(value) {
value.addEventListener("input", function(e) {
e.preventDefault();
sumTotal();
});
}
function sumTotal() {
let sumValue = document.querySelectorAll('.wapf-field-input input[type=number]');
let currentTotal = 0;
for (let i = 0; i < sumValue.length; i++) {
if (parseInt(sumValue[i].value)) {
currentTotal += parseInt(sumValue[i].value);
};
}
}
for (let i = 0; i < getAllInputs.length; i++) {
getAllInputs[i].max = totalMaxQty;
}
Please note that I am looking for vanilla JavaScript solutions only.