web-dev-qa-db-fra.com

jQuery .val () vs .attr ("valeur")

J'avais pensé que ces deux étaient les mêmes, mais ils semblent ne pas l'être. J'utilise généralement $obj.attr("value") pour travailler avec des champs de formulaire, mais sur la page en cours de construction, $obj.attr("value") ne renvoie pas le texte que j'ai saisi dans mon champ. Cependant, $obj.val() le fait. 

Sur une page différente que j'ai construite, $obj.attr("value") et $obj.val() renvoient le texte saisi dans le champ de formulaire. 

Comment expliquer que $obj.attr("value") fonctionne comme prévu dans un cas mais pas dans un autre?

Quelle est la manière appropriée de définir et de récupérer la valeur d'un champ de formulaire à l'aide de jQuery?

jqueryforms
71
morgancodes

Il y a une grande différence entre un objet propriétés et un objet attributs

Voir cette question (et ses réponses) pour certaines des différences: .prop () vs .attr ()

Le Gist est que .attr(...) obtient seulement la valeur des objets au début (quand le HTML est créé). val() récupère la valeur propriété de l'objet qui peut changer plusieurs fois.

87
Neal

Depuis jQuery 1.6, attr() renverra la valeur d'origine d'un attribut (celle du balisage lui-même). Vous devez utiliser prop () pour obtenir la valeur actuelle:

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

Cependant, utiliser val () n’est pas toujours le même. Par exemple, la valeur des éléments <select> est en réalité la valeur de leur option sélectionnée. val() en tient compte, mais pas prop(). Pour cette raison, val() est préférable.

24
Frédéric Hamidi

PS: Ce n'est pas une réponse mais juste un complément aux réponses ci-dessus.

Juste pour la référence future, j'ai inclus un bon exemple qui pourrait nous aider à dissiper nos doutes:

Essayez ce qui suit. Dans cet exemple, je vais créer un sélecteur de fichier qui peut être utilisé pour sélectionner un fichier, puis essayer de récupérer le nom du fichier que j'ai sélectionné: Le code HTML est ci-dessous :

<html>
    <body>
        <form action="#" method="post">
            <input id ="myfile" type="file"/>
        </form>
        <script type="text/javascript" src="jquery.js"> </script>
        <script type="text/javascript" src="code.js"> </script>
    </body>
</html>

Le fichier code.js contient le code jQuery suivant. Essayez d'utiliser les deux des extraits de code jQuery un par un et voir la sortie.

Code jQuery avec attr ('valeur'): 

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

Code jQuery avec val (): 

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

Sortie:

La sortie du code jQuery avec attr ('value') sera 'indéfinie' . La sortie du code jQuery avec val () correspondra au nom de fichier que vous avez sélectionné.

Explication : Maintenant, vous pouvez facilement comprendre ce que les réponses principales voulaient exprimer. La sortie du code jQuery avec attr ('valeur') sera 'indéfinie' car initialement aucun fichier n'était sélectionné, la valeur n'est donc pas définie. Il vaut mieux utiliser val () car il obtient la valeur actuelle.

Afin de voir pourquoi la valeur indéfinie est renvoyée, essayez ce code dans votre code HTML et vous verrez maintenant que attr. ("Valeur") renvoie toujours "test", car sa valeur est "test" et qu'elle était auparavant indéfinie.

<input id ="myfile" type="file" value='test'/>

J'espère que cela vous a été utile.

4
ρss

La méthode appropriée pour définir et obtenir la valeur d'un champ de formulaire consiste à utiliser .val() method.

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

Avec jQuery 1.6, il existe une nouvelle méthode appelée .prop() . 

Depuis jQuery 1.6, la méthode .attr() renvoie non défini pour les attributs qui n'ont pas été définis. En outre, .attr () ne doit pas être utilisé sur des objets simples, des tableaux, la fenêtre ou le document. Pour récupérer et Pour changer les propriétés du DOM, utilisez la méthode .prop ().

2
Emre Erkan

Afin d’obtenir la value de n’importe quel champ de saisie, vous devez toujours utiliser $element.val() car jQuery handle pour récupérer la valeur correcte en fonction du navigateur du type d’élément.

2
ShankarSangoli

Apprenons à partir d'un exemple ..__ Soit un champ de saisie de texte avec la valeur par défaut = "Entrez votre nom"

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

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

Les deux vont retourner "Entrez votre nom"

Mais supposons que vous modifiiez le texte par défaut en "Jose" dans votre navigateur.

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

donne toujours le texte par défaut, à savoir "Entrez votre nom".

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

Mais .val() retournera "Jose", c’est-à-dire la valeur actuelle.

J'espère que ça aide.

1
Saloni Kalra
jQuery(".morepost").live("click", function() { 
var loadID = jQuery(this).attr('id'); //get the id 
alert(loadID);    
});

vous pouvez également obtenir la valeur de id en utilisant .attr ()

1
harsimer

cet exemple peut être utile:

<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  </head>
  <body>
	<input id="test" type="text"  />
	<button onclick="testF()" >click</button>
	
	
	<script>
	function testF(){
	
		alert($('#test').attr('value'));
		alert( $('#test').prop('value'));
		alert($('#test').val());
		}
	</script>
  </body>
 </html>

dans l'exemple ci-dessus, tout fonctionne parfaitement. mais si vous changez la version de jquery en 1.9.1 ou plus récente dans la balise script, vous verrez "indéfini" dans la première alerte . attr ('valeur') ne fonctionne pas avec jquery version 1.9.1 ou plus récente.

1
Moseyza
jQuery('.changer').change(function () {
    var addressdata = jQuery('option:selected', this).attr('address');
    jQuery("#showadd").text(addressdata);
});
1
harsimer

Si vous obtenez la même valeur pour la propriété et l'attribut, mais que vous la voyez toujours différente en HTML, essayez ceci pour obtenir celui en HTML:

$('#inputID').context.defaultValue;
0
Rodrigo Sangiovanni Lima

jquery - Récupère la valeur dans une zone de texte d'entrée 

<script type="text/javascript"> 

jQuery(document).ready(function(){

var classValues = jQuery(".cart tr").find("td.product-name").text();
classValues = classValues.replace(/[_\W]+/g, " ")

jQuery('input[name=your-p-name]').val(classValues);

//alert(classValues);

});

</script>
0
Ashar Zafar

Exemple plus ... attr () est différent, val () n'en est qu'un! Prop est booléen sont différents.

//EXAMPLE 1 - RESULT
$('div').append($('input.idone').attr('value')).append('<br>');
$('div').append($('input[name=nametwo]').attr('family')).append('<br>');
$('div').append($('input#idtwo').attr('name')).append('<br>');
$('div').append($('input[name=nameone]').attr('value'));

$('div').append('<hr>'); //EXAMPLE 2
$('div').append($('input.idone').val()).append('<br>');

$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VAL
$('div').append($('input.idone').val('idonenew')).append('<br>');
$('input.idone').attr('type','initial');
$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VALUE
$('div').append($('input[name=nametwo]').attr('value', 'new-jquery-pro')).append('<br>');
$('input#idtwo').attr('type','initial');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" class="idone" name="nameone" value="one-test" family="family-number-one">
<input type="hidden" id="idtwo" name="nametwo" value="two-test" family="family-number-two">
<br>
<div></div>

0
KingRider