Как использовать jQuery и this для захвата измененного значения элемента формы - PullRequest
Новая
       3

Как использовать jQuery и this для захвата измененного значения элемента формы

5 голосов
/ 06 марта 2012

У меня есть следующий код, который работает каждый раз, когда происходит изменение элемента в моей веб-форме: 

<!--

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

//-->

С чем я боролся, это как захватить элемент поля формы id , name и изменение значения при изменении событие сработало.

Может кто-нибудь помочь мне в этом?

Спасибо!

** ФАЙЛ JAVASCRIPT **

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

Ответы [ 8 ]

5 голосов
/ 06 марта 2012

Я думаю, у вас может быть проблема с самого начала: 

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

Вы не хотите начинать с $ (this), вам нужно выбрать входы, которые вы хотите отслеживать.Затем вы можете использовать $ (this) внутри функции change ().

Джеймс Аллардис отметил, что вы можете ссылаться на форму с помощью $ (this), и событие change () будет перехватывать все изменения вформа.Я бы посоветовал вам более конкретно нацелить измененные элементы, чтобы не отслеживать события изменений на элементах, которые вам не нужны или не нужны, что может устранить непредвиденное поведение.Вы можете настроить таргетинг на них с помощью селектора класса или формы, например :input.

4 голосов
/ 06 марта 2012

Насколько я понимаю, this относится к элементу form, и вы хотите получить ссылку на потомка того элемента form, который вызвал событие.

Если это правильно, вы можете использовать свойство target объекта события: 

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

Вот рабочий пример .

В приведенном выше коде elem будет означатьк элементу, который вызвал событие.После этого вы можете получить доступ к свойствам этого элемента, например id: 

$(this).change(function(e) {
    var elemId = e.target.id;
});
2 голосов
/ 06 марта 2012

Чтобы использовать $ (this), у вас должен быть предопределенный объект JavaScript. Вот почему это называется это .

Так что вам нужно сделать что-то вроде этого: 

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

или 

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

Короче говоря, вам нужно выбрать элемент и создать объект, прежде чем вы сможете использовать $ (this).

1 голос
/ 06 марта 2012

Вот как: 

$(this).change(function(){
   var id, name, value;
   id = this.id; name = this.name; value = this.value;
});
1 голос
/ 06 марта 2012

ПОПРОБУЙТЕ с jQuery 1.7 

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

DEMO

1 голос
/ 06 марта 2012

Вы можете получить доступ к свойствам напрямую следующим образом: 

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

В качестве альтернативы, jQuery предоставляет вспомогательные функции для извлечения этих свойств из первого элемента в коллекции jQuery: 

$(this).change(function(){
  var $this = $(this),
    id = $this.attr('id'),
    name = $this.attr('name'),
    value = $this.val();
});
1 голос
/ 06 марта 2012

Вы бы сделали что-то вроде следующего в вашем изменении 

var ELEMEMT = $('#IDOFELEMENT').val();
0 голосов
/ 07 марта 2012

Хорошо, я опаздываю на вечеринку, за исключением комментариев, но только для потомков: вот мое расширение подхода Surreal Dreams: 

$("#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 прослушивает изменения входных данных внутри.Я также кэшировал jQuery-оболочку this.Voila!

...