Numeric textbox by JQuery dynamically

Question

I've the following code to make a textbox numeric only. It's working fine.

$( ".numeric" ).keypress(function( evt ) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      evt.preventDefault();
    }
});

<input id="RollNo" type="text" class="numeric">

But when I tried to make the textbox numeric dynamically on a combobox change event, it's not working.

The following is the combobox change event handler-

$("#ExamId").change(function(){
    var examName = $("#ExamId option:selected").text();
    if(examName == "O Level"){
        $("#RollNo").removeClass("numeric");            
    }
    else{
        $("#RollNo").addClass("numeric");
    }
});

Is there any way out to make it happen?

why not you use type="number"?

Amit
– Amit

2019-10-18 06:05:40 +00:00
Commented Oct 18, 2019 at 6:05 — Amit
– Amit, Commented Oct 18, 2019 at 6:05

Bilal Siddiqui · Accepted Answer · 2019-10-18 06:20:53Z

1

Jquery events are appended to DOM at time of load, so whether you add or remove class, the events are native to element.

You may use unbind to release a keypress event.

function handleKeyPress(evt) {
  evt = (evt) ? evt : window.event;
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if (charCode > 31 && (charCode < 48 || charCode > 57)){
        evt.preventDefault();
      }
}

$("#ExamId").change(function(){
    var examName = $("#ExamId option:selected").text();
    if (examName == "O Level"){
        $("#RollNo").unbind('keypress');
    }
    else {
        $('#RollNo').keypress(handleKeyPress);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="RollNo" type="text">

<select id="ExamId">
  <option value="">Select</option>
  <option value="O Level">O Level</option>
  <option value="1 Level">1 Level</option>
</select>

edited Oct 18, 2019 at 6:20

answered Oct 18, 2019 at 6:12

Bilal Siddiqui

3,6491 gold badge16 silver badges22 bronze badges

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

1 Comment

Bilal Siddiqui Over a year ago

Happy to help paul :)

Collectives™ on Stack Overflow

Numeric textbox by JQuery dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related