jQuery .val change ne change pas la valeur d'entrée


103

J'ai une entrée HTML avec un lien dans la valeur.

<input type = 'text' value = 'http://www.link.com' id = 'link' />

J'utilise jQuery pour changer la valeur d'un certain événement.

$('#link').val('new value');

Le code ci-dessus modifie la valeur de la zone de texte mais ne modifie pas la valeur dans le code (value = 'http://www.link.com' reste inchangé). J'ai besoin que la valeur = '' change également.


Que voulez-vous dire in the code? Regardez-vous la source originale (donc non modifiée) de la page?
Frédéric Hamidi

Utilisation de l'élément inspect de Chrome.
Lukas

3
@Luke La valeur changera, mais pas la valeur visible de l'élément HTML dans l'inspecteur de Chrome. Essayez d'alerter la valeur ou de la sortir sur la console et vous verrez qu'elle a changé. Vous voyez, cela a changé: jsfiddle.net/a8SxF
TheZ

Oui je vois ça maintenant. J'utilise zClip pour copier la valeur dans le presse-papiers, mais il copie l'ancienne valeur après sa modification. Je pense que je peux y remédier avec un peu de déconner.
Lukas

Réponses:


180

Utilisez attrplutôt.
$('#link').attr('value', 'new value');

démo


6
C'est tout à fait correct, en utilisant setAttributeou jQuery, attrvous affecterez également la valeur de l'élément DOM: jsfiddle.net/a8SxF/1
TheZ

4
@TheZ c'est parce que l'indicateur de valeur sale de l'entrée est faux. Essayez d'interagir avec l'entrée (la valeur est sale après l'entrée de l'utilisateur), puis setAttribute
Esailija

5
Mais quand vous voulez obtenir du HTML avec .html(), alors il y aura toujours la même ancienne valeur, peu importe, si vous utilisez .val('new value')ou attr('value', 'new value')... :(
Legionar

6
Codé un tas massif et compliqué de fonctions en utilisant .val (comme suggéré par tout ce que j'ai lu précédemment) et a eu exactement le même problème. Sanglant ennuyeux! Cette réponse devrait être le premier point d'appel pour tous les débutants jQuery cherchant à mettre à jour les éléments de formulaire de manière dynamique. M'aurait fait gagner quelques bonnes heures si j'avais lu ceci en premier!
Grant le

2
C'est pourquoi il est si difficile de démarrer avec JavaScript / JQuery, autant de mises en garde comme celle-ci. Cela m'a beaucoup aidé. Je vous remercie!
eaglei22

13

La modification de la propriété value ne modifie pas le defaultValue. Dans le code (récupéré avec .html()ou innerHTML), l'attribut value contiendra la defaultValuepropriété value, pas la propriété value.


1
Ceci explique cela. La saisie ne change pas non plus la valeur de <input id = 'a'> mais affecte le résultat de $ ("# a"). Val (). Une question juste pour être sûr: Est-ce que $ ("# a"). Val (valeur) est vraiment la bonne façon de changer la valeur d'un élément d'entrée, de sorte que la bonne valeur soit soumise?
Daniel Katz du

1
Oui c'est correct. changer l'attribut ne changera pas ce qui est soumis.
Kevin B du

8

pour développer un peu la réponse de Ricardo: https://stackoverflow.com/a/11873775/7672426

http://api.jquery.com/val/#val2

à propos de val ()

La définition de valeurs à l'aide de cette méthode (ou de la propriété de valeur native) ne provoque pas l'envoi de l'événement de modification. Pour cette raison, les gestionnaires d'événements pertinents ne seront pas exécutés. Si vous souhaitez les exécuter, vous devez appeler .trigger ("change") après avoir défini la valeur.


2

Ce n'est qu'un scénario possible qui m'est arrivé. Eh bien, si cela aide quelqu'un, c'est génial: j'ai écrit une application compliquée qui, quelque part dans le code, j'ai utilisé une fonction pour effacer toutes les valeurs des zones de texte avant de les afficher. Quelque temps plus tard, j'ai essayé de définir une valeur de zone de texte en utilisant jquery val ('value') mais je n'ai pas remarqué que juste après cela, j'ai appelé la méthode ClearAllInputs .. donc, cela pourrait également arriver.


1
$('#link').prop('value', 'new value');

Explication: Attr fonctionnera sur jQuery 1.6 mais depuis jQuery 1.6.1, les choses ont changé. Dans la majorité des cas, prop () fait ce que attr () faisait auparavant. Le remplacement des appels à attr () par prop () dans votre code fonctionnera généralement. Attr vous donnera la valeur de l'élément tel qu'il a été défini dans le html lors du chargement de la page et prop donne les valeurs mises à jour des éléments qui sont modifiés via jQuery.


Essayez également d'expliquer votre réponse
Vinoth Krishnan

0

Mon problème similaire a été causé par la présence de caractères spéciaux (par exemple, des points) dans le sélecteur.

Le correctif était d'échapper aux caractères spéciaux:

$("#dots\\.er\\.bad").val("mmmk");

D'accord, très mauvais, vous ne devriez pas vous échapper, vous devez renommer l'identifiant de votre élément.
webaholik

-1
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
function changes() {
$('#link').val('new value');
}
</script>
<button onclick="changes()">a</button>
<input type='text' value='http://www.link.com' id='link'>

1
Ouais, cela ne met pas à jour la valeur réelle. Il met à jour la zone de texte à l'écran, mais lorsque vous essayez de soumettre un formulaire, la valeur est celle qu'elle était lorsque la page a été chargée à l'origine.
Grant le

-1

Pour moi, le problème était que la modification de la valeur de ce champ ne fonctionnait pas:

$('#cardNumber').val(maskNumber);

Aucune des solutions ci-dessus n'a fonctionné pour moi, j'ai donc étudié plus en détail et trouvé:

Selon la spécification d'événement de niveau 2 du DOM: l'événement change se produit lorsqu'un contrôle perd le focus d'entrée et que sa valeur a été modifiée depuis que le focus a été obtenu. Cela signifie que l'événement de changement est conçu pour se déclencher lors du changement par interaction de l'utilisateur. Les modifications programmatiques ne provoquent pas le déclenchement de cet événement.

La solution était d'ajouter la fonction de déclenchement et de la faire déclencher un événement de changement comme celui-ci:

$('#cardNumber').val(maskNumber).trigger('change');

-2

Vérifiez deux fois plus d'un élément avec un identifiant non unique! C'était ma situation avec la boucle foreach et la duplication de mes identifiants.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.