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.