jQuery .val () vs .attr (“valore”)

Pensavo che questi due fossero uguali, ma sembra che non lo fossero. Generalmente ho usato $obj.attr("value") per lavorare con i campi del modulo, ma nella pagina che sto attualmente costruendo, $obj.attr("value") non restituisce il testo che inserisco nel mio campo . Tuttavia, $obj.val() .

In una pagina diversa che ho creato, sia $obj.attr("value") che $obj.val() restituiscono il testo inserito nel campo modulo.

Cosa potrebbe rendere $obj.attr("value") funzionante come previsto in un caso ma non in un altro?

Qual è il modo corretto per impostare e recuperare il valore di un campo modulo usando jQuery?

C’è una grande differenza tra le proprietà di un object e gli attributi di un object

Vedi queste domande (e le relative risposte) per alcune delle differenze: .prop () vs .attr ()

L’essenza è che .attr(...) sta solo ottenendo il valore degli oggetti all’inizio (quando viene creato l’html). val() sta ottenendo il valore della proprietà dell’object che può cambiare molte volte.

A partire da jQuery 1.6, attr() restituirà il valore originale di un attributo (quello nel markup stesso). È necessario utilizzare prop () per ottenere il valore corrente:

 var currentValue = $obj.prop("value"); 

Tuttavia, l’uso di val () non è sempre lo stesso. Ad esempio, il valore degli elementi è in realtà il valore della loro opzione selezionata. val() prende in considerazione, ma prop() no. Per questo motivo, è preferibile val() .

PS: Questa non è una risposta, ma solo un supplemento alle risposte di cui sopra.

Solo per riferimento futuro, ho incluso un buon esempio che potrebbe aiutarci a chiarire il nostro dubbio:

Prova quanto segue. In questo esempio creerò un selettore di file che può essere usato per selezionare un file e quindi cercherò di recuperare il nome del file che ho selezionato: Il codice HTML è qui sotto :

   

Il file code.js contiene il seguente codice jQuery. Prova ad utilizzare entrambi i frammenti di codice jQuery uno per uno e vedere l’output.

codice jQuery con attr (‘valore’):

 $('#myfile').change(function(){ alert($(this).attr('value')); $('#mybutton').removeAttr('disabled'); }); 

codice jQuery con val ():

 $('#myfile').change(function(){ alert($(this).val()); $('#mybutton').removeAttr('disabled'); }); 

Produzione:

L’output del codice jQuery con attr (‘value’) sarà ‘undefined’. L’output del codice jQuery con val () sarà il nome del file che hai selezionato.

Spiegazione : ora puoi capire facilmente che cosa volevano trasmettere le risposte migliori. L’output del codice jQuery con attr (‘value’) sarà ‘indefinito’ perché inizialmente non c’era alcun file selezionato, quindi il valore non è definito. È meglio usare val () perché ottiene il valore corrente.

Per vedere perché viene restituito il valore non definito, prova questo codice nel tuo codice HTML e vedrai che ora l’attr. (‘Value’) restituisce ‘test’ sempre, perché il valore è ‘test’ e in precedenza non era definito.

  

Spero sia stato utile per te.

Il modo corretto per impostare e ottenere il valore di un campo modulo è utilizzare il metodo .val() .

 $('#field').val('test'); // Set var value = $('#field').val(); // Get 

Con jQuery 1.6 c’è un nuovo metodo chiamato .prop() .

A partire da jQuery 1.6, il metodo .attr() restituisce undefined per gli attributi che non sono stati impostati. Inoltre, .attr () non dovrebbe essere usato su oggetti semplici, array, la finestra o il documento. Per recuperare e modificare le proprietà DOM, utilizzare il metodo .prop ().

Per ottenere il value di qualsiasi campo di input, dovresti sempre utilizzare $element.val() perché jQuery gestisce per recuperare il valore corretto in base al browser del tipo di elemento.

 jQuery('.changer').change(function () { var addressdata = jQuery('option:selected', this).attr('address'); jQuery("#showadd").text(addressdata); }); 
 jQuery(".morepost").live("click", function() { var loadID = jQuery(this).attr('id'); //get the id alert(loadID); }); 

puoi anche ottenere il valore di id usando .attr ()

Impariamo da un esempio. Lascia che ci sia un campo di inserimento del testo con valore predefinito = “Inserisci il tuo nome”

 var inp = $("input").attr("value"); var inp = $("input").val(); 

Entrambi restituiranno “Inserisci il tuo nome”

Ma supponiamo di cambiare il testo predefinito in “Jose” nel browser.

 var inp = $("input").attr("value"); 

fornirà comunque il testo predefinito, ad esempio “Inserisci il tuo nome”.

 var inp = $("input").val(); 

Ma .val() restituirà “Jose”, ovvero il valore corrente.

Spero che sia d’aiuto.

questo esempio può essere utile:

           

Esempio più … attr () è vario, val () è solo uno! Prop è booleano sono diversi.

 //EXAMPLE 1 - RESULT $('div').append($('input.idone').attr('value')).append('
'); $('div').append($('input[name=nametwo]').attr('family')).append('
'); $('div').append($('input#idtwo').attr('name')).append('
'); $('div').append($('input[name=nameone]').attr('value')); $('div').append('
'); //EXAMPLE 2 $('div').append($('input.idone').val()).append('
'); $('div').append('
'); //EXAMPLE 3 - MODIFY VAL $('div').append($('input.idone').val('idonenew')).append('
'); $('input.idone').attr('type','initial'); $('div').append('
'); //EXAMPLE 3 - MODIFY VALUE $('div').append($('input[name=nametwo]').attr('value', 'new-jquery-pro')).append('
'); $('input#idtwo').attr('type','initial');
    

jquery – Ottieni il valore in una casella di testo di input

  

Se ottieni lo stesso valore sia per la proprietà che per l’attributo, ma lo vedi ancora diverso sul codice HTML prova questo per ottenere quello HTML:

 $('#inputID').context.defaultValue; 

In attr('value') stai specificatamente dicendo che stai cercando il valore di un attributo chiamato vaule . È preferibile utilizzare val() poiché questa è la funzionalità di jQuery per estrarre il valore dagli elementi del modulo.

Ho sempre usato .val() e ad essere sincero non sapevo nemmeno che si potesse ottenere il valore usando .attr("value") . Ho impostato il valore di un campo modulo usando .val () come ex. $('#myfield').val('New Value');