How to use jQuery and 'this' to capture changed form element value

Question

I have the following code that works each and every time an element change happens within my web form:

<!--

jQuery.support.cors = true; // needed for ajax to work in certain older browsers and versions

$(document).ready(function(){

    $(this).change(function(){
        alert('form element changed!');
    });

}); // end .ready()

//-->

What I have been struggling with is how to capture the form field element id, name and changed value when the change event is triggered.

Can anyone help me out on this?

Thanks!

** JAVASCRIPT FILE **

// Sarfraz
$(this).change(function(){
   var id, name, value;
   id = this.id, name = this.name, value = this.value;
    alert('id=' + id); // this returns 'undefined'
    alert('name=' + name); // this returns 'undefined'
    alert('value=' + value); // this returns 'undefined'
});
//

// rjz
$(this).change(function(){
  var $this = $(this),
    id = $this.attr('id'),
    name = $this.attr('name'),
    value = $this.val();

    alert(id); // this returns 'undefined'
    alert(name); // this returns 'undefined'
    alert(value); // this returns blank
});

// Jamie
$(this).change(function(){
    var id = $(this).attr('id');
    var name = $(this).attr('name');
    var value = $(this).attr('value');

    alert('id=' + id); // this returns 'undefined'
    alert('name=' + name); // this returns 'undefined'
    alert('value=' + value); // this returns 'undefined'
});
//

//James Allardice
$(this).change(function(e) {
    var elem = e.target;
    alert('elem=' + elem); // this returns 'objectHTMLTextAreaElement'
});
//

// Surreal Dreams
$("#my-form input").change(function(){
    alert('form element changed!');
    var value = $(this).val();
    var id = $(this).attr("id");
    var name = $(this).attr("name");

    alert(id); // nothing happens
    alert(name); // nothing happens
    alert(value); // nothing happens
});
//

//Jamie - Second Try
$('.jamie2').each(function() {
    $(this).change(function(){
        var id = $(this).attr('id');
        alert(id); // nothing happens
    });
});
//

Answer 1

I think you may have a problem right from the start:

$("#myform input").change(function(){
    alert('form element changed!');
    var value = $(this).val();
    var id = $(this).attr("id");
    var name = $(this).attr("name");
});

You don't want to start with $(this), you need to select the inputs you want to monitor. Then you can use $(this) inside the change() function.

James Allardice pointed out that you may be referring to the form with $(this), and the change() event would catch all changes in the form. I'd suggest you target your changed elements more specifically so you're not catching change events on elements that you don't need or want, which could eliminate unexpected behavior. You could target them with a class or form selector like :input.

Answer 2

As far as I understand it, this refers to a form element and you want to get a reference to the descendant of that form element which triggered the event.

If that's right, you can use the target property of the event object:

$(this).change(function(e) {
    var elem = e.target;
});

Here's a working example.

In the above code, elem will refer to the element which triggered the event. You can then access properties of that element, such as id:

$(this).change(function(e) {
    var elemId = e.target.id;
});

Answer 3

In order to use $(this), you must have a predefined JavaScript object. That's why it's called this.

So you need to do something like this:

$('.class_name').each(function() {
    $(this).change(function(){
        var id = $(this).attr('id');
    });
});

or

$('.class_name').click(function() {
    $(this).change(function(){
        var id = $(this).attr('id');
    });
});

In short, you need to select an element and create an object before you can use $(this).

Answer 4

You would do something like the following inside your change

var ELEMEMT = $('#IDOFELEMENT').val();

Answer 5

You can access the properties directly as follows:

$(this).change(function(){
  var id = this.id,
    name = this.name,
    value = this.value;
});

Alternatively, jQuery provides helper functions to retrieve these properties from the first element in a jQuery collection:

$(this).change(function(){
  var $this = $(this),
    id = $this.attr('id'),
    name = $this.attr('name'),
    value = $this.val();
});

Answer 6

TRY with jQuery 1.7

$(document).on('change','#myID',function(){
    alert('Id:'+this.id+'\nName:'+this.name+'\nValue:'+this.value);
});​

DEMO

Answer 7

Here is how:

$(this).change(function(){
   var id, name, value;
   id = this.id; name = this.name; value = this.value;
});

Answer 8

Well, I'm late to the party except in comment form, but just for posterity: here's my extension of Surreal Dreams' approach:

$("#myform").on('change', input, (function(){
    alert('form element changed!');
    var $this = $(this);
    var value = $this.val();
    var id = $this.attr("id");
    var name = $this.attr("name");
});

#myform listens for changes on inputs inside. I also cached the jQuery-wrapped this. Voila!