Input Number Max not working using Jquery dynamically

Question

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

Every call to .change() adds an event handler without removing any previous handlers. By the time the handler that thinks the max is 79 is called, the previous handler has already reduced the value to 77. — Pointy
– Pointy, Commented Feb 25, 2019 at 17:28
@Pointy I get that but how to reset the Max value in each on change event. Is there an alternative way. I've updated the question with a new snippet which with what I'm trying to achieve. — Binny
– Binny, Commented Feb 26, 2019 at 13:44
The problem is that you're only keeping track of the value in one place. I'll add an answer with wihat I think would be a better way of doing this. — Pointy
– Pointy, Commented Feb 26, 2019 at 13:47

Pointy · Accepted Answer · 2019-02-26 13:53:56Z

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.

David · Accepted Answer · 2019-02-25 17:36:11Z

1

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);
});

answered Feb 25, 2019 at 17:36

David

221k42 gold badges247 silver badges338 bronze badges

1 Comment

Binny Over a year ago

I've updated my question David. I have to reset the input but not sure how to achieve it.

Collectives™ on Stack Overflow

Input Number Max not working using Jquery dynamically

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related