78 votes

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

J'avais pensé à ces deux-là étaient les mêmes, mais ils semblent ne pas l'être. J'ai généralement été à l'aide d' $obj.attr("value") de travailler avec des champs de formulaire, mais sur la page que je suis en train de construire, $obj.attr("value") ne retourne pas le texte, je rentre dans mon domaine. Toutefois, $obj.val() n'.

Sur une autre page que j'ai construit, à la fois $obj.attr("value") et $obj.val() retour au texte entré dans le champ de formulaire.

Ce qui pourrait expliquer $obj.attr("value") de travail comme prévu dans un cas mais pas dans l'autre?

Quelle est la bonne façon de définir et de récupérer un champ de formulaire de la valeur à l'aide de jQuery?

90voto

Neal Points 68710

Il y a une grande différence entre les objets, propriétés et des objets attributs

Voir ces questions (et leurs réponses) certaines de ces différences: .prop() vs .attr()

L'essentiel est qu' .attr(...) est en obtenant seulement les objets de valeur au début (quand le html est créé). val() devient l'objet de la propriété de la valeur qui peut changer plusieurs fois.

25voto

Frédéric Hamidi Points 123646

Depuis jQuery 1.6, attr() sera de retour à la valeur initiale d'un attribut (l'un dans l'annotation elle-même). Vous avez besoin d'utiliser prop() pour obtenir la valeur actuelle:

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

Cependant, l'utilisation de val() n'est pas toujours le même. Par exemple, la valeur de <select> éléments est en fait la valeur de leur option sélectionnée. val() en tienne compte, mais prop() ne le sont pas. Pour cette raison, val() est préféré.

4voto

ρss Points 1407

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

Juste pour la référence future, j'ai inclus un bon exemple qui pourrait nous aider à nettoyer notre doute:

Essayez les solutions suivantes. Dans cet exemple, je vais créer un sélecteur de fichier qui peut être utilisé pour sélectionner un fichier, puis je vais essayer de récupérer le nom du fichier que j'ai sélectionné: Le code html 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>

L'code.js le fichier contient le code jQuery. Essayez d'utiliser les deux de jQuery de fragments de code un par un et voir le résultat.

jQuery avec attr('value'):

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

jQuery avec val():

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

Sortie:

La sortie de jQuery avec attr('value') sera "indéfini". La sortie de jQuery avec val() sera le nom de fichier que vous avez sélectionné.

Explication: Maintenant vous pouvez comprendre facilement ce que sont les réponses voulu transmettre. La sortie de jQuery avec attr('value') sera 'undefined' parce que d'abord il n'y a pas de fichier sélectionné, de sorte que la valeur est undefined. Il est préférable de l'utiliser val (), car il obtient la valeur actuelle.

Afin de voir pourquoi la valeur indéfinie est retourné essayer ce code dans le html, et vous verrez que, maintenant, la attr.('valeur') renvoie 'test', toujours, parce que la valeur est "test" et, auparavant, il a été défini.

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

J'espère que c'était utile pour vous.

2voto

ShankarSangoli Points 45345

Afin d'obtenir l' value de tous les champs de saisie, vous devez toujours utiliser $element.val() car jQuery poignées pour retreieve la bonne valeur basée sur le navigateur du type d'élément.

2voto

Emre Erkan Points 5624

La bonne façon de définir et de récupérer la valeur d'un champ de formulaire à l'aide de .val() méthode.

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

Savez-vous que la version de jQuery que vous utilisez dans les deux projets? Avec jQuery 1.6 il y a une nouvelle méthode appelée .prop().

Comme de jQuery 1.6, l' .attr() méthode renvoie undefined pour les attributs qui n'ont pas été définies. En outre, l' .attr() ne doit pas être utilisé sur plaine les objets, les tableaux, la fenêtre, ou dans le document. Pour récupérer et changement des propriétés DOM, utilisez la .prop() la méthode.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X