Come usare jQuery e 'cio' di catturare elemento forma modificata valore

Question

Ho il seguente codice che funziona ogni volta un cambiamento elemento accade nel mio modulo web:

<!-- 

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

//--> 

Quello che ho lottato con è come catturare l'elemento di campo formaid, nome e valore modificato quando l'evento di modifica viene attivato.

Qualcuno può darmi una mano su questo?

Grazie!

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

Answer 1

Per quanto ho capito, this si riferisce ad un elemento form e si desidera ottenere un riferimento al discendente dell'elemento form che ha attivato l'evento.

Se è vero, è possibile utilizzare la proprietà target dell'oggetto evento:

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

Ecco un working example.

Nel codice precedente, elem si riferirà all'elemento che ha attivato l'evento.È quindi possibile accedere alle proprietà di tale elemento, come ad esempio id:

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

Answer 2

penso che potrebbe essere un problema fin dall'inizio:

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

che non si desidera iniziare con $ (questo), è è necessario selezionare gli ingressi che si desidera monitorare. Quindi puoi usare $ (this) all'interno della funzione change().

James Allardice ha sottolineato che si potrebbe fare riferimento al modulo con $ (questo) e l'evento change() potrebbe rilevare tutte le modifiche nel modulo. Ti suggerirei di indirizzare gli elementi modificati in modo più specifico in modo da non rilevare gli eventi di modifica sugli elementi che non ti servono o che desideri, il che potrebbe eliminare comportamenti imprevisti. Potresti scegliere come target un selettore di classe o modulo come :input.

Answer 3

Si potrebbe fare qualcosa di simile al seguente all'interno del vostro cambiamento

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

Answer 4

È possibile accedere alle proprietà direttamente come segue:

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

In alternativa, jQuery fornisce funzioni di supporto per recuperare questi oggetti di prima elemento in una raccolta jQuery:

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

Answer 5

TRY con jQuery 1,7

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

DEMO

Answer 6

Ecco come:

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

Answer 7

Per poter utilizzare $ (questo), è necessario disporre di un oggetto JavaScript predefinito. Ecco perché si chiama questo.

quindi è necessario fare qualcosa di simile:

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

o

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

In breve, è necessario selezionare un elemento e creare un oggetto prima di poter utilizzare $ (questo).

Answer 8

bene, sono in ritardo alla festa se non in forma di commenti, ma solo per i posteri: ecco la mia estensione dell'approccio surreali 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 ascolto per le modifiche su ingressi all'interno. Ho anche memorizzato nella cache il jQuery-wrapped this. Ecco!