Как я могу ограничить числовые входы на основе их суммы

Question

Это мой первый раз, когда я делаю огромное количество javascript, поэтому прошу прощения, если это основной вопрос.

Так что для части формы заказа человек может заказать в общей сложности 10 пицц, которые могут быть разных типов. Вы можете получить тэк его здесь:

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

Итак, давайте говорить, что если человек входы 4 орденами pizza1, 5 орденами pizza2, и собирается ставить в 2-х порядков pizza3 (11 пицц), как я бы ограничил его ввод без использования кнопки отправки в режиме реального времени?

Спасибо

EDIT: Есть гораздо больше, чем три вида пиццы. Это всего лишь скриншот кода, который я написал.

Answer 1

Не могли бы вы добавить прослушиватель событий onchange ко всем раскрывающимся спискам? Это может вызвать функцию, которая проверила значение 3 из и установила 10 - их сумма была максимальной для третьего входа. 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: Я получил это работает, и я положу его на jsfiddle, хотя это немного грязный. Ошибка, которую я делал в любом случае, подсчитывала значение ввода при расчете max, что означало, что если у 1 из них было 5, он рассчитал, что его max был 10- (0 + 0 + 5), поэтому он не пропускал бы его до 5.

Answer 2

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>

Это HTML-файл необходимо проверить значения. Я удалил все дополнительные div s, которых я мог найти. Далее приведенный выше javascript можно использовать как «maxform.js» в том же каталоге, чтобы изменить записи.