如何使用jQuery和'this'捕获更改的表单元素值 [英] How to use jQuery and 'this' to capture changed form element value

问题描述

我的网站表单中每次发生元素更改时，我都有以下代码可以正常工作:

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()

//-->

我一直在努力的是如何捕获 form字段元素 id ，名称和更改后的值 >触发更改事件时.

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.

有人可以帮我吗?

谢谢！

** JAVASCRIPT文件**

** 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
    });
});
//

推荐答案

据我了解，this引用form元素，而您想获得对该form元素的后代的引用触发了事件.

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.

如果正确，则可以使用事件对象的target属性:

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

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

这是一个工作示例.

在上面的代码中，elem将引用触发事件的元素.然后，您可以访问该元素的属性，例如id:

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;
});

这篇关于如何使用jQuery和'this'捕获更改的表单元素值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！