CODEWITHSUNDEEP
javascript
Kent Shin
Kent Shin

Reputation: 23

How can I limit numeric inputs based on their sum

This is my first time doing huge amounts of javascript, so I apologize if this is a basic question.

So for part of an order form, a person can order a total of 10 pizzas that could be different types. You can get the jist of it here:

<div><h3>Types of Pizzas</h3></div>
    <div>
        <input type="checkbox" name="selections" id="pizza1"><label>pizza1</label>
            <div id="PC1">
                <label>How Many?</label><input type="number" min="0" oninput="validity.valid||(value='');" class="pizzaTotal">
            </div>
    </div>

    <div>
        <input type="checkbox" name="selections" id="pizza2"><label>pizza2</label>
            <div id="PC2">
                <label>How Many?</label><input type="number" min="0" oninput="validity.valid||(value='');" class="pizzaTotal">
            </div>
    </div>

    <div>
        <input type="checkbox" name="selections" id="pizza3"><label>pizza3</label>
            <div id="PC3">
                <label>How Many?</label><input type="number" min="0" oninput="validity.valid||(value='');" class="pizzaTotal">
            </div>
    </div>

So let's say that if a person inputs 4 orders of pizza1, 5 orders of pizza2, and is about to put in 2 orders of pizza3 (11 pizzas), how would I limit his input without the use of a submit button in real time?

Thank you

EDIT: There are much more than three types of pizzas. This is just a screenshot of code I have written.

Upvotes: 2

Views: 115

Answers (2)

StardustGogeta
StardustGogeta

Reputation: 3406

function maxForm()
{
    var x = parseInt(document.getElementById("pizza1a").value);
    var y = parseInt(document.getElementById("pizza2a").value);
    var z = parseInt(document.getElementById("pizza3a").value);
    if (x>10)
        document.getElementById("pizza1a").value = 10;
    else if (x+y>10)
        document.getElementById("pizza2a").value = 10-x;
    else if (x+y+z>10)
        document.getElementById("pizza3a").value = 10-x-y;
}
<h3>Types of Pizzas</h3>
<form>
    <input type="checkbox" name="selections" id="pizza1"><label>pizza1</label>
            <label>How Many?</label><input type="number" id="pizza1a" min="0" onchange="maxForm();" class="pizzaTotal"><br>
    <input type="checkbox" name="selections" id="pizza2"><label>pizza2</label>
            <label>How Many?</label><input type="number" id="pizza2a" min="0" onchange="maxForm();" class="pizzaTotal"><br>
    <input type="checkbox" name="selections" id="pizza3"><label>pizza3</label>
            <label>How Many?</label><input type="number" id="pizza3a" min="0" onchange="maxForm();" class="pizzaTotal"><br>
</form>
<script src="maxform.js"></script>

This is the HTML file necessary to check the values. I removed all extra divs I could find. Next, the javascript above can be used as "maxform.js" in the same directory to modify the entries.

Upvotes: 1

David
David

Reputation: 433

Could you add the onchange event listener to all the drop down boxes? This could call a function that checked the value of the 3 of and set 10 - their sum to be the max for the 3rd input. Edit1:

function maxForm()
{
    var x = parseInt(document.getElementById("pizza1a").value);
    var y = parseInt(document.getElementById("pizza2a").value);
    var z = parseInt(document.getElementById("pizza3a").value);
    var tot = x + y +z;
    document.getElementById("pizza1a").max = 10-tot;
    document.getElementById("pizza2a").max = 10-tot;
    document.getElementById("pizza3a").max = 10-tot;
}

Edit2: I got it working and I'll put it up on jsfiddle, although it's a bit messy. The mistake I was making anyway was counting in the input's value when calculating a max which meant if 1 of them had 5, it calculated its max was 10-(0+0+5) so it wouldn't let it go past 5.

Upvotes: 0

Related Questions