Metodo val
Il metodo val permette di ottenere e modificare
il valore corrente di un elemento.
Sintassi
In questo modo possiamo ottenere il valore corrente del primo elemento nell'insieme:
$(selettore).val();
Il metodo val è principalmente utilizzato per
ottenere i valori degli elementi del modulo, come:
input,
select
e textarea. Se
viene chiamato su una collezione vuota, restituirà undefined.
Quando si lavora con select con l'attributo
multiple impostato, il metodo restituirà un array dei valori di ogni
option selezionata. Se nessuna è selezionata,
verrà restituito un array vuoto. In questo modo possiamo impostare
il valore di ogni elemento nell'insieme. Come parametro si può
passare una stringa, un array o un numero:
$(selettore).val(valore);
Applicazione di una funzione a ogni elemento nell'insieme. La funzione accetta come primo parametro l'indice corrente nell'insieme, e come secondo - il suo valore corrente:
$(selettore).val(nome attributo, function(indice nell'insieme, valore corrente));
Esempio
Nel seguente esempio, otteniamo i valori inseriti nell'input e li visualizziamo di seguito in un paragrafo:
<input type="text" value="text">
<p></p>
p {
color: green;
margin: 8px;
}
$('input').keyup(function() {
let value = $(this).val();
$('p').text(value);
}).keyup();
Esempio
E ora con il metodo val andremo a
scrivere i valori dei pulsanti che
premiamo, nell'input posizionato sotto:
<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);
});
