Définir la valeur d'entrée dans jQuery

Utilisez la méthode val() de jQuery pour définir la valeur d’un champ de saisie, lire sa valeur actuelle ou en calculer une nouvelle à partir de l’ancienne. Sélectionnez le champ voulu et appelez .val("new value") pour modifier sa valeur. Les exemples ci-dessous présentent les formes de définition, avec fonction de rappel et de lecture, ainsi que des vérifications pour éviter les erreurs courantes.

Définir la valeur d’un champ avec .val()

Appelez .val(value) sur une sélection jQuery pour attribuer cette valeur à chaque élément correspondant. Par exemple, $("#email").val("reader@example.com") définit la valeur du champ dont l’identifiant est email. Remplacez le sélecteur et la chaîne par ceux de votre page. Un sélecteur de classe comme $(".email") peut correspondre à plusieurs champs : utilisez-le uniquement si vous voulez tous les modifier.

L’élément doit exister au moment de l’appel. Placez celui-ci dans un gestionnaire prêt, par exemple $(function () { ... }), ou chargez le script après le balisage du formulaire concerné. Si le sélecteur ne correspond à aucun élément, rien ne sera modifié. Si la valeur ne change pas, vérifiez le sélecteur ainsi que l’identifiant ou la classe de l’élément.

Utiliser une fonction de rappel pour mettre à jour les valeurs des champs

Transmettez une fonction à .val() lorsque la nouvelle valeur dépend de la valeur actuelle de chaque champ. jQuery appelle cette fonction pour chaque élément correspondant et lui fournit sa position, indexée à partir de zéro, ainsi que sa valeur actuelle. Retournez la valeur à attribuer : ces arguments sont transmis à la fonction de rappel, ils ne constituent pas automatiquement sa valeur de retour. Cette forme permet de transformer plusieurs champs sans devoir les lire puis les modifier séparément.

Par exemple, la logique de rappel suivante renvoie le texte actuel en majuscules. Il s’agit d’une illustration JavaScript autonome de la transformation ; dans une page, transmettez la fonction de rappel à .val() sur les champs sélectionnés :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

function uppercaseValue(index, currentValue) {
  return currentValue.toUpperCase();
}

const updatedValue = uppercaseValue(0, "delft");

Pour conserver le comportement courant qui met le texte en majuscules lorsque le champ perd le focus, associez un gestionnaire blur et utilisez $(this).val(function (index, currentValue) { return currentValue.toUpperCase(); }) à l’intérieur. Lorsque l’utilisateur quitte le champ, la chaîne renvoyée par la fonction de rappel remplace sa valeur. Vous pouvez omettre le paramètre index si vous n’en avez pas besoin.

Lire la valeur d’un champ avec .val()

Appelez .val() sans argument pour lire la valeur du premier élément de la sélection. Par exemple, const email = $("#email").val(); stocke la valeur actuelle afin que votre code puisse la vérifier ou la réutiliser. Si un sélecteur correspond à plusieurs éléments, l’accesseur ne lit toujours que le premier ; utilisez une opération sur chaque élément si vous avez besoin de toutes les valeurs.

La valeur lue dans un champ est une chaîne. Convertissez-la explicitement si la suite du traitement nécessite un nombre, et tenez compte du texte réellement saisi par l’utilisateur. L’accesseur renvoie la valeur actuelle du champ, qui peut avoir changé depuis le chargement de la page.

Vérifications courantes lors de la définition de valeurs de champ

• Vérifiez le sélecteur : assurez-vous que l’identifiant, la classe ou l’autre sélecteur désigne le champ voulu. S’il correspond à plusieurs champs, ils seront tous modifiés.
• Vérifiez le moment de l’appel : exécutez la définition après la création du champ, par exemple dans un gestionnaire prêt de jQuery ou après le balisage du formulaire.
• Vérifiez la source de la valeur : avec une fonction de rappel, retournez la chaîne transformée. Les arguments reçus sont, dans cet ordre, l’index de l’élément et sa valeur actuelle.
• Gérez les événements séparément : définir une valeur avec .val() ne déclenche pas à lui seul un événement change. Si un autre code doit réagir à cette modification programmée, déclenchez explicitement l’événement nécessaire après avoir défini la valeur, par exemple avec .trigger("change").
• Distinguez l’affichage de l’envoi du formulaire : .val() modifie la valeur actuelle du contrôle ; cela ne met pas à jour le texte ailleurs dans la page et ne garantit pas que le champ sera inclus lors de l’envoi du formulaire. Si l’envoi importe, vérifiez que le champ est activé et appartient bien au formulaire.