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:

javascript$(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:

javascript$(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:

javascript$(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:

html<input type="text" value="text">
<p></p>

cssp {
  color: green;
  margin: 8px;
}

javascript$('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:

html<div>
  <button>one</button>
  <button>two</button>
  <button>three</button>
  <button>four</button>
</div>
<input type="text" value="click buttons">

cssbutton {
  margin: 4px;
  cursor: pointer;
}

input {
  margin: 4px;
  color: green;
}

javascript$('button').click(function() {
  let text = $(this).text();
  $('input').val(text);
});

Vedi anche