Jquery event on input change with specific class

Question

I need to trigger a function when an input text field with a specific CSS class is changed.

    <form class="form-horizontal" role="form" id="infoClient">
                                <div class="form-group">
                                    <label for="Input" class="col-md-2 col-sm-2 control-label greenIfNotEmpty">Prénom</label>
                                    <div class="col-md-4 col-sm-4">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="Input" placeholder="">
                                            <span class="input-group-addon">
                                                <i class="glyphicon  glyphicon-pencil"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <label for="disabledTextInput" class="col-md-2 col-sm-2 control-label greenIfNotEmpty">Nom famille</label>
                                    <div class="col-md-4 col-sm-4">
                                        <div class="input-group">
                                            <input type="text" id="disabledTextInput2" class="form-control" placeholder="">
                                            <span class="input-group-addon">
                                                <i class="glyphicon  glyphicon-pencil"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>



    $('input[type='text']').change(function() { ... });

This works for every input field,

$('input[type='text'] .greenIfNotEmpty').change(function() { ... });

is not working.

Can anyone help me on this ?

The space in CSS and jQuery selectors means "descendant", which excludes self. You're selecting some element in the input that has that class, which won't work. — Nathan Tuggy, Jun 16 '15 at 01:54

score 4 · Answer 1 · answered Jun 16 '15 at 02:07

4

Try something like this, demo in FIDDLE

JS

$('input:text.red').on('keyup', function() {
    alert('hello red')
});

HTML

<input type='text' class='red'/><br/>
<input type='text' class='yellow'/>

CSS

.red{
    background-color:red
}

.yellow {
    background-color:yellow
}

answered Jun 16 '15 at 02:07

Lumi Lu

3,289
1
11
21

Did you include jquery lib yet? something like this – Lumi Lu Jun 16 '15 at 02:13

score 0 · Answer 2 · edited Jun 16 '15 at 01:59

0

Try remove space between input and class name like so :

$('input[type='text'].cssClass').change(function() { ... });

edited Jun 16 '15 at 01:59

David Lacroix

594
1
5
12

answered Jun 16 '15 at 01:53

Norlihazmey Ghazali

9,000
1
23
40

Is it the input selector is true? i just copied from your code. And if the input has the class name, maybe you can just use something like `$('input.className')` – Norlihazmey Ghazali Jun 16 '15 at 01:59
$('input.className') is not working either... I have a few input that as soon they are filled i want to make them green with class .success.... those input have css class greenIfNotEmpty... – David Lacroix Jun 16 '15 at 02:00
Weird, it should work. is it the dom dynamically added into page? – Norlihazmey Ghazali Jun 16 '15 at 02:02
Of course this never work because there is no classname on it. `greenIfNotEmpty` not attached on input itself. You want the input that next to `greenIfNotEmpty` i guess. – Norlihazmey Ghazali Jun 16 '15 at 02:09

score -1 · Accepted Answer · edited Jun 26 '15 at 13:40

-1

I feel dumb, I've attached class to Label instead of Input. Thanks a lot everybody.

edited Jun 26 '15 at 13:40

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Jun 16 '15 at 02:16

David Lacroix

594
1
5
12

Now you realized that. Welcome mate. – Norlihazmey Ghazali Jun 16 '15 at 02:19
You should accept one of the answers, even if it's this one, by clicking on the green tick. This marks the problem solved in Stack Overflow (and you get points) – Brian Tompsett - 汤莱恩 Jun 26 '15 at 13:41

Jquery event on input change with specific class

3 Answers3