Textbox Class Onchange Event Listener Not Working with Multiple Classes

Question

<input class="item-quantities valid" data-bomid="1939" data-rid="2054" id="AddedItemIDs_1939_" name="AddedItemIDs[1939]" onkeypress="return isNumberKey(event)" type="text" value="7" aria-invalid="false">

Can't get this to work. What I've tried...

$('.item-quantities, .valid').change(function () {
            alert("we are here");
});

or...

$('.item-quantities.valid').change(function () {
            alert("we are here");
});

or...

$('.item-quantities').change(function () {
            alert("we are here");
});

... and a few other variations.

Can't seem to figure out how to trigger this event. I've been playing around with various variations of $('.item-quantities, .valid'), to no avail. What is the correct way to do this?

change event only fires when focus out from the field

Pranav C Balan
– Pranav C Balan

2016-11-22 04:07:28 +00:00
Commented Nov 22, 2016 at 4:07 — Pranav C Balan
– Pranav C Balan, Commented Nov 22, 2016 at 4:07

Randy Burrell · Accepted Answer · 2016-11-22 04:48:42Z

1

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
        $( document ).ready(function() {
            $(".item-quantities").change(function () {
                        alert("we are here");
            });
        });

        </script>
    </head>
    <body>

        <input id="items" class="item-quantities valid" type="text">
    </body>
<html>

That will do the trick for classes

edited Nov 22, 2016 at 4:48

answered Nov 22, 2016 at 4:15

Randy Burrell

114 bronze badges

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

5 Comments

Casey Crookston Over a year ago

Yeah, I should have said that this textbox is generated inside of a grid, so it's any one of many textboxes, and I won't know the actual id.

Randy Burrell Over a year ago

Is this a dot net app?

Randy Burrell Over a year ago

<!DOCTYPE html> <html> <head> <script src="ajax.googleapis.com/ajax/libs/jquery/3.1.0/…> <script> $( document ).ready(function() { $(".item-quantities").change(function () { alert("we are here"); }); }); </script> </head> <body> <input id="items" class="item-quantities valid" type="text"> </body> <html>

Randy Burrell Over a year ago

Always put all jQuery code within a script tag and wrap the within $( document ).read(function(){});

Casey Crookston Over a year ago

I already have it wrapped in document.ready. I posted a new thread with more details. stackoverflow.com/questions/40734094/…

Mayank Pandeyz · Accepted Answer · 2016-11-22 04:09:01Z

0

Try this:

$('.item-quantities.valid').change(function () {
    alert("we are here");
});

But change event of text only fires on its focus lost, its better to use keypress or keydown

Working fiddle

answered Nov 22, 2016 at 4:09

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

2 Comments

Casey Crookston Over a year ago

The fiddle does indeed work. But this solution isn't working on my page. Hrmmm!!

Casey Crookston Over a year ago

It DOES work in the fiddle. But for some reason it doesn't work on my page.

S M · Accepted Answer · 2016-11-22 04:21:32Z

0

You can use oninput and onkeypress event like this: Working fiddle

    $('.item-quantities, .valid').on('input',function(e){
         alert("we are here")
        });

$('.item-quantities, .valid').on('change keypress', function(e){
         alert("we are xfgdfgdgdfg")
        });

Or like this

<input class="item-quantities valid" type="text" onchange="yourFunction();"
onkeyup="this.onchange();" onpaste="this.onchange(); onkeypress=this.onchange()" oninput="this.onchange();"/>

edited Nov 22, 2016 at 4:21

answered Nov 22, 2016 at 4:08

S M

3,2536 gold badges35 silver badges61 bronze badges

Collectives™ on Stack Overflow

Textbox Class Onchange Event Listener Not Working with Multiple Classes

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related