Méthode val
La méthode val permet d'obtenir et de modifier
la valeur actuelle d'un élément.
Syntaxe
Ainsi nous pouvons obtenir la valeur actuelle du premier élément dans l'ensemble :
$(sélecteur).val();
La méthode val est principalement utilisée pour
obtenir les valeurs des éléments de formulaire, tels que :
input,
select
et textarea. Si
elle est appelée sur une collection vide, elle retournera undefined.
Lorsqu'on travaille avec un select ayant l'attribut
multiple défini, la méthode retournera un tableau des valeurs de chaque
option sélectionnée. Si aucune n'est sélectionnée,
un tableau vide sera retourné. Ainsi nous pouvons définir
la valeur de chaque élément dans l'ensemble. En tant que paramètre, on peut
passer une chaîne, un tableau ou un nombre :
$(sélecteur).val(valeur);
Application d'une fonction à chaque élément de l'ensemble. La fonction accepte comme premier paramètre l'index courant dans l'ensemble, et comme deuxième - sa valeur actuelle :
$(sélecteur).val(nom attribut, function(index dans l'ensemble, valeur actuelle));
Exemple
Dans l'exemple suivant, récupérons les valeurs saisies dans l'input, et affichons-les ci-dessous dans un paragraphe :
<input type="text" value="text">
<p></p>
p {
color: green;
margin: 8px;
}
$('input').keyup(function() {
let value = $(this).val();
$('p').text(value);
}).keyup();
Exemple
Et maintenant, avec la méthode val, nous allons
enregistrer les valeurs des boutons que nous allons
presser, dans l'input situé ci-dessous :
<div>
<button>one</button>
<button>two</button>
<button>three</button>
<button>four</button>
</div>
<input type="text" value="click buttons">
button {
margin: 4px;
cursor: pointer;
}
input {
margin: 4px;
color: green;
}
$('button').click(function() {
let text = $(this).text();
$('input').val(text);
});
