jQuery how to properly use onChange

Question

I am using Drupal 7 (quite new to both Drupal and Javascript / jQuery) and I got a class called "field-name-field-activity", now what I want is to put an onchange of every input in that class.

jQuery('.field-name-field-activity :input').onchange = function() {
    //enter code here
};

I am not sure if I'm using my onchange right here, I also saw some people using onChange instead of onchange, not sure what the difference is, but can anybody tell me how to use onchange the right way in my example?

What is the type of the html element you are applying this event on? — Ankit Jaiswal, May 03 '13 at 08:52
Do you want to bind an event handler to elements with `class="field-name-field-activity"` or to `` descendants of an element with that class name? Your selector is currently doing the latter. — andyb, May 03 '13 at 09:05
Its `jQuery('input.field-name-field-activity').change()` which will select all the input elements with class field-name-field-activity — Bhavin Joshi, May 03 '13 at 10:13

Ankit Jaiswal · Answer 1 · 2013-05-03T09:09:49.157

4

With jquery just change will work:

$('.field-name-field-activity').change(function() {
  // your code here
});

Edit:

As the event is to be bind with text type, a better way is to use input event like:

$('.field-name-field-activity').on('input', function() {
    // your code here
});

The onchange event may not work correctly on some browsers in case of text fields.

edited May 03 '13 at 09:09

answered May 03 '13 at 08:49

Ankit Jaiswal

22,859
5
41
64

"As of jQuery 1.7, the `.on()` method is the preferred method for attaching event handlers to a document" - see [`.bind()`](http://api.jquery.com/bind/) documentation. – andyb May 03 '13 at 09:08
Oh yes, my sincere apologies! I completely misread the revision history. – andyb May 03 '13 at 09:09

score 2 · Accepted Answer · answered May 03 '13 at 08:48

2

This is a simple error of syntax try this jQuery('.field-name-field-activity :input').change(function() { //enter code here });

here is a link to the api reference http://api.jquery.com/change/

answered May 03 '13 at 08:48

Nomad101

1,688
11
16

I can only give one accepted answer, I'll give it to the person who answered first. (I'm sorry everyone else!) :( – Conceptual May 03 '13 at 09:02

palaѕн · Answer 3 · 2013-05-03T08:56:03.940

1

Try like this:

jQuery('.field-name-field-activity input').change(function() {
    //enter code here
});

SIMPLE DEMO HERE

edited May 03 '13 at 08:56

answered May 03 '13 at 08:48

palaѕн

72,112
17
116
136

Where exactly do you end the change event here? – Conceptual May 03 '13 at 08:50
You have never ended your change(, but I suppose it ends after the curly bracket } – Conceptual May 03 '13 at 08:54
Hes getting at a typo your missing the ending ) – Nomad101 May 03 '13 at 08:54
@user1841216: yes, you are right. It ends after the curly bracket `}` – palaѕн May 03 '13 at 08:57

Adil Shaikh · Answer 4 · 2013-05-03T09:18:01.733

0

Try this -

jQuery('.field-name-field-activity').on('change',function() {
    //enter code here
});

http://api.jquery.com/change/

edited May 03 '13 at 09:18

answered May 03 '13 at 08:48

Adil Shaikh

44,509
17
89
111

Your selector is different to the one in the question – andyb May 03 '13 at 09:03
If you are not sure, then you should clarify with the OP. – andyb May 03 '13 at 09:11

score 0 · Answer 5 · edited May 23 '17 at 12:22

Concerning performance I would suggest not to use the ":input"-Selector.

Because :input is a jQuery extension and not part of the CSS specification, queries using >:input cannot take advantage of the performance boost provided by the native DOM >querySelectorAll() method.

Source: http://api.jquery.com/input-selector/

If the classname relates to input-Elements only anyway, just use the class-selector like Ankit Jaiswal suggested, because a single-class-selector performs best.

Source: Jquery element+class selector performance

jQuery how to properly use onChange

5 Answers5

Linked