Jquery input number in multiples (keyup)

Question

How can I make an input element accept numbers only in multiples of 50?

I know we can specify step="50" as an attribute, but I would prefer a solution that is triggered by the keyup event.

I found this code, which prevents users from entering a number less than 50.

Question : How can I adjust this code so that only multiples of 50 can be entered ?

$('#numberbox').keyup(function(){
  if ($(this).val() < 50){
    alert("Minimum Quantity: 50");
    $(this).val('50');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="numberbox" type='number'>

Poul Kruijt · Accepted Answer · 2016-01-07 16:56:29Z

2

Use the modulo operator

var multiple = 50;

$('#numberbox').keyup(function(){
   if (parseInt($(this).val()) % multiple ) {
      alert("Only multiples of " + multiple + " allowed");
      $(this).val(multiple);
   }
});

answered Jan 7, 2016 at 16:56

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wordpress user Over a year ago

Thanks , This is what i am looking for :)

Guruprasad J Rao · Accepted Answer · 2016-01-07 16:57:52Z

1

I would prefer blur instead of keyup as keyup would keep on alerting. To know if it is multiple of 50 check a condition with modulo i.e.% like if parseInt($(this).val())%50 != 0

$('#numberbox').blur(function(){
  if (parseInt($(this).val())%50 != 0){
    alert("Multiples of 50 should be entered");
    $(this).val('50');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="numberbox" type='number'>

answered Jan 7, 2016 at 16:57

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

1 Comment

Guruprasad J Rao Over a year ago

@wordpressuser. No probs.. Happy coding.. :)

Zakaria Acharki · Accepted Answer · 2016-01-07 17:01:16Z

1

You can use Remainder (%) to do this, check the example bellow.

The remainder operator returns the remainder left over when one operand is divided by a second operand. It always takes the sign of the dividend, not the divisor.

$('#numberbox').keyup(function(){
  if ($(this).val()%50==0){
    $('#result').text($(this).val()+' is multiple of 50');
  }else{
     $('#result').text($(this).val()+' is not a multiple of 50');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="numberbox" type='number'>
<span id='result'></span>

Hope this helps.

edited Jan 7, 2016 at 17:01

answered Jan 7, 2016 at 16:55

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Collectives™ on Stack Overflow

Jquery input number in multiples (keyup)

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related