Issue In Adding Class To TextBox Using Jquery

Question

Basically I'm working on a simple functionality. But stuck on a part when I try to addClass to any HTML Element it's not working.

I've two HTML elements

Dropdown for DocType
TextBox for DocNumber.

Based on selected value in DocType I need to change class for DocNumber which will handle validation part for DocNumber textBox.

Here is code of my script.

$(document).ready(function () {
    $(".number").keydown(function (e) {
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
        (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        return;
    }
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
        }
    });
 });

$('#ddlDoctype').on('change', function () {
    var validateCriteria = $(this).find("option:selected").val();
    if (validateCriteria == "A") {
    $("#txtDocNumber").addClass("minSize[8]");
    $("#txtDocNumber").addClass("number");
    $("#txtDocNumber").removeClass("minSize[12]");
} else if (validateCriteria == "E") {
    $("#txtDocNumber").addClass("minSize[12]");
    $("#txtDocNumber").removeClass("minSize[8]");
    $("#txtDocNumber").addClass("number");
} else if (validateCriteria == "C") {
    $("#txtDocNumber").removeClass("number");
} else {
    $("#txtDocNumber").removeClass("number");
}
});

Here a good thing to notice is that when I add minSize[8] to textbox it gets assigned but number class is not getting assigned to the textbox. When I added that part in watch I get a result that number class is getting assigned but it's not working and allowing user to enter alphabets too.

I can't get out of it even after trying many ways to solve this. If any help is possible then I'll be grateful to you.

This is not an answer but something you SHOULD do. You should store the query selector into a variable and use it instead of calling the query selector multiple times. var txtDoc = $("#txtDocNumber"), and then txtDoc.addClass('foo'). — borislemke
– borislemke, Commented Jun 2, 2017 at 4:51
@borislemke Thanks for advice mate but it doesn't change anything. — Chirag
– Chirag, Commented Jun 2, 2017 at 4:56
@Chirag yes, I know. I explicitly said that it is not an answer. The reason why you should is because it is expensive to call the query selector multiple times. — borislemke
– borislemke, Commented Jun 2, 2017 at 5:09

Manoj · Accepted Answer · 2017-06-02 05:03:04Z

2

You need to put change event in document ready and need to register keydown event of .number with on.

       $(document).ready(function () {
            $(document).on('keydown', '.number', function (e) {
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
                    (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
                    (e.keyCode >= 35 && e.keyCode <= 40)) {
                    return;
                }
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
            });
            $('#ddlDoctype').on('change', function () {
                var validateCriteria = $(this).find("option:selected").val();
                if (validateCriteria == "A") {
                    $("#txtDocNumber").addClass("minSize[8]");
                    $("#txtDocNumber").addClass("number");
                    $("#txtDocNumber").removeClass("minSize[12]");
                } else if (validateCriteria == "E") {
                    $("#txtDocNumber").addClass("minSize[12]");
                    $("#txtDocNumber").removeClass("minSize[8]");
                    $("#txtDocNumber").addClass("number");
                } else if (validateCriteria == "C") {
                    $("#txtDocNumber").removeClass("number");
                } else {
                    $("#txtDocNumber").removeClass("number");
                }
            });
        });

edited Jun 2, 2017 at 5:03

answered Jun 2, 2017 at 5:01

Manoj

5,0913 gold badges34 silver badges59 bronze badges

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

2 Comments

Manoj Over a year ago

change event is not inside document ready. You can try my solution this will work. @Chirag

Chirag Over a year ago

Thanks Manoj for your quick responce. Your answer did the trick.

Super User · Accepted Answer · 2017-06-02 05:05:06Z

2

As per provided fiddle, You have forgot two thing
1. You have missed jquery library
2. $('#ddlDocType') should be inside $(document).ready
check updated snippet below..

    $(".number").keydown(function (e) {
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
        (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        return;
    }
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
        }
    });

    $('#ddlDocType').on('change', function () {  
        var validateCriteria = $(this).val();

        if (validateCriteria == "A") { 
        $("#txtDocNumber").addClass("number");
    } else if (validateCriteria == "E") {
        $("#txtDocNumber").addClass("number");
    } else if (validateCriteria == "C") {
        $("#txtDocNumber").removeClass("number");
    } else {
        $("#txtDocNumber").removeClass("number");
    }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Document Type: 
<select id="ddlDocType">
  <option value="A">Pan</option>
  <option value="E">Adhar</option>
  <option value="E">Passport</option>
  <option value="D">Driving Licence</option>
</select>
  </br>
  </br>
  Document Number: <input type="text" name="docNum" id="txtDocNumber"><br>

answered Jun 2, 2017 at 5:05

Super User

9,6623 gold badges34 silver badges48 bronze badges

3 Comments

Chirag Over a year ago

It's Not working. When I select Adhar it should only enter numbers in textbox.

Super User Over a year ago

You have to use event delegation for this

Chirag Over a year ago

Thanks for your time @superUser but Manoj's trick did the work. :)

Collectives™ on Stack Overflow

Issue In Adding Class To TextBox Using Jquery

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related