Set Max Value Of Three Input Numbers Together

I have three input numbers: Currently the max value is 50. I would like the max for all three together to be 50 aswell. How can I solve this with javascript or jquery?

Solution 1:

This method sums the other inputs, and if the sum + the current value is greater than max, it changes the current input's value to fit max.

For example, try entering 30, 5, 20 to the input boxes.

var max = 50;
var $inputs = $('input');

functionsumInputs($inputs) {
  var sum = 0;
  
  $inputs.each(function() {
    sum += parseInt($(this).val(), 0);
  });

  return sum;
}

$inputs.on('input', function(e) {
  var $this = $(this);
  var sum = sumInputs($inputs.not(function(i, el) {
    return el === e.target;
  }));
  var value = parseInt($this.val(), 10) || 0;
  if(sum + value > max) $this.val(max - sum);
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputmin="0"name="cat1"step="1"type="number"max="50"value="0" /><inputmin="0"name="cat2"step="1"type="number"max="50"value="0" /><inputmin="0"name="cat3"step="1"type="number"max="50"value="0" />

Solution 2:

Hope you expected this way. Try Using this code. it will check the aggregate of three fields and check it whether it is greater than 50.

$(":input").bind('keyup mouseup', function () {          

  var cat1=$("#cat1").val();
  var cat2=$("#cat2").val();
  var cat3=$("#cat3").val();
  var total=parseInt(cat1) + parseInt(cat2) + parseInt(cat3);
 
  if(total>50) {
    alert("it exceeds 50");
    returnfalse;
  }
  
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputmin="0"id="cat1"name="cat1"step="1"type="number"max="50"value="0" /><inputmin="0"id="cat2"name="cat2"step="1"type="number"max="50"value="0" /><inputmin="0"id="cat3"name="cat3"step="1"type="number"max="50"value="0" />

Solution 3:

This will ensure the sum doesn't exceed 50. In case the new value makes the total exceed the limit, the other two will be lowered equally to enforce the total=50 rule.

Note the

let share2 = Math.min(Math.floor(excessValue / 2), elmt2Value) which ensures

To ensure we won't remove more from one of the input than its value.

<inputmin="0"name="cat1"id="cat1"step="1"type="number"max="50"value="0"onchange="valueChanged('cat1')" /><inputmin="0"name="cat2"id="cat2"step="1"type="number"max="50"value="0"onchange="valueChanged('cat2')" /><inputmin="0"name="cat3"id="cat3"step="1"type="number"max="50"value="0"onchange="valueChanged('cat3')" /><script>functionvalueChanged(changedElmtId) {

        // Retrieve all input, the one changed and the other 2let elmt2Id = "cat2", elmt3Id = "cat3"if ( changedElmtId === elmt2Id ) {
            elmt2Id = "cat1"
        }
        elseif ( changedElmtId === elmt3Id ) {
            elmt3Id = "cat1"
        }

        let changedElmt = document.querySelector("#" + changedElmtId)
        let elmt2 = document.querySelector("#" + elmt2Id)
        let elmt3 = document.querySelector("#" + elmt3Id)

        let elmt2Value = parseInt(elmt2.value)
        let elmt3Value = parseInt(elmt3.value)

        // Check if any action is neededlet totalValue = parseInt(changedElmt.value) + elmt2Value + elmt3Value
        if ( isNaN(totalValue) || totalValue <= 50 )
            return// Measure excess then split in 2let excessValue = totalValue - 50let share2 = Math.min(Math.floor(excessValue / 2), elmt2Value)
        let share3 = excessValue - share2

        console.log("Current:", " " + elmt2Id + ": ", share2, " " + elmt3Id + ": ", share3)
        console.log("Total:", totalValue, " Excess: ", excessValue, " " + elmt2Id + ": ", share2, " " + elmt3Id + ": ", share3)


        elmt2.value = elmt2Value - share2
        elmt3.value = elmt3Value - share3

     }
</script>

Solution 4:

I hope that works for you easy small and fast for lesser number of input in form.

$(function(){
  $('input[type=number]').attr('max', '50')
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputmin="0"name="cat1"step="1"type="number"value="0" /><inputmin="0"name="cat2"step="1"type="number"value="0" /><inputmin="0"name="cat3"step="1"type="number"value="0" />