CODEWITHSUNDEEP
javascriptjqueryhtml
Binny
Binny

Reputation: 338

Input Number Max not working using Jquery dynamically

Created a simple Input and tried to set Max value using Jquery. Initially it sets the value to 77 and then decreases the max value to 50.

The below example works !

   $(document).ready(function () {
      minMaxAge("#test-input",0,77)
      minMaxAge("#test-input",0,50)  //Text Box max is now 50 // Working
   });
   
   function minMaxAge(id,min,max) {       
        $(id).change(function() {
         if ($(this).val() > max)
         {
             $(this).val(max);
         }
         else if ($(this).val() < min)
         {
             $(this).val(min);
         }
       });
        
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test-input" type="number" />

Now using the same example but increment the max value from 77 to 79.

The below example doesn't work.

$(document).ready(function () {
      minMaxAge("#test-input",0,77)
      minMaxAge("#test-input",0,79)  //Text Box max is now 79 // Not Working
   });
   
   function minMaxAge(id,min,max) {       
        $(id).change(function() {
         if ($(this).val() > max)
         {
             $(this).val(max);
         }
         else if ($(this).val() < min)
         {
             $(this).val(min);
         }
       });
        
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test-input" type="number" /

I was Jstepper.Js library to achieve the result but had the similar problem. Works fine when decreasing the max value but doesn't work when increasing the max value.

Ref:Jstepper Library

Update:

Please check the updated snippet.

$(document).ready(function() {
  $('input:radio[name="input-max"]').change(
    function() {
      if ($(this).is(':checked')) {
        var min = 0;
        var max = $(this).val();
          minMaxAge("#test-input",0,max)        
      }
    });
});

function minMaxAge(id, min, max) {
  $(id).change(function() {
    if ($(this).val() > max) {
      $(this).val(max);
    } else if ($(this).val() < min) {
      $(this).val(min);
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Have two Radio button and they have set the max number to be entered in the Input. 
</p>

<input type="radio" id="input-max1" name="input-max" value=77>Max 77<br>
<input type="radio" id="input-max2" name="input-max" value=79> Max 79<br>
<input id="test-input" type="number" />

Upvotes: 1

Views: 2585

Answers (2)

Pointy
Pointy

Reputation: 413712

The problem with your approach is that you really don't have a good way to maintain the context of what happens as the sequence of event handlers runs. If I were doing this, I would have just one event handler, and have the minMaxAge() function adjust the minimum and maximum values. Something like this:

function minMaxAge(id, min, max) {
  var $element = $(id);
  if (!$element.hasClass("handler-added")) {
    // need to initialize the "change" event handler
    $element.addClass("handler-added")
      .on("change", function() {
        var max = $element.data("max"), min = $element.data("min");
        if (+$element.val() > max)
          $element.val(max);
        else if (+$element.val() < min)
          $element.val(min);
      });
  }

  // update min and max
  if ($element.data("min") == null || +$element.data("min") > min)
    $element.data("min", min);
  if ($element.data("max") == null || +$element.data("max") < max)
    $element.data("max", max);
);

That approach only adds the "change" event handler once. After that, subsequent calls to minMaxAge() update the minimum and maximum limits kept in jQuery .data() properties.

Upvotes: 1

David
David

Reputation: 218828

You're creating two change chandlers in each example. The first example has this order of operations:

  • If the number is greater than 77, set it to 77
  • If the number is greater than 50, set it to 50

The second example has this order of operations:

  • If the number is greater than 77, set it to 77
  • If the number is greater than 79, set it to 79

In the second example the number will never be greater than 77 by the time you compare it to 79.

By setting the maximum to 77 and 79, you effectively set it to 77. If you want the max to be 79, just set it to 79:

$(document).ready(function () {
  minMaxAge("#test-input",0,79);
});

Upvotes: 1

Related Questions