Il metodo val() è indubbiamente uno degli strumenti più utili ed efficienti che il framework jQuery mette a disposizione di tutti gli sviluppatori web.
Quante volte ci siam trovati dinnanzi all’esigenza di controllare i campi di un form html, con la necessità di dover accedere al contenuto di campi di testo, select, radio button, checkbox, focalizzando l’attenzione sulla sintassi e le metodologie da adottare.

Il metodo .val() permette di accedere al contenuto di tutti gli elementi che caratterizzano un form. Le sue potenzialità non finiscono qui, infatti è inoltre possibile impostare il valore che ogni elemento deve assumere. Tutto con un solo metodo.
In questo articolo mostreremo:

• come leggere il valore di un campo di testo;
• come scrivere nei campi di testo;
• come leggere la voce selezionata in una select;
• come impostare una voce di una select;
• come verificare il check di un set di radio button;
• come impostare il check di un set di radio button;
• come verificare il check di una checkbox;
• come impostare il check di una checkbox;

Vediamo innanzitutto la sintassi di base del metodo .val():

// Se accediamo ad un campo tramite ID
$("#id_campo").val();

// Se accediamo ad un campo tramite type-name
$("input[type=text][name=nome_campo]").val();

Con queste prime due linee di codice introduciamo il metodo val in modalità lettura (get). La prima accede al campo di testo tramite ID, il secondo invece tramite la coppia type – name. Scrivendo quindi il seguente codice:

var contenuto = $("#id_campo").val();

avvaloriamo la variabile contenuto con il contenuto del campo “id_campo“.
Supponiamo invece di voler impostare un valore ad un campo di testo, utilizzando il metodo .val() in modalità scrittura (set):

// Se accediamo ad un campo tramite ID
$("#id_campo").val("Nuovo contenuto!");

// Se accediamo ad un campo tramite type-name
$("input[type=text][name=nome_campo]").val("Nuovo contenuto!");

La sintassi resta invariata rispetto alla modalità lettura, logicamente il metodo val accetta in ingresso la stringa da impostare nel campo di testo.

Vediamo adesso come accedere ad una select html.
Chi conosce bene Javascript sa che non è immediato il controllo di una select, è necessario individuare la select, quindi individuare la voce selezionata tramite indice e finalmente accedere al valore. Più complesso è selezionare una voce in maniera dinamica.
Con il metodo val() tutto si riduce a ciò:

// Se accediamo ad una select tramite ID
var valore = $('#id_select').val();

// Se accediamo ad una select tramite name
var valore = $("select[name=nome_campo]").val();

Selezionare una voce della select è altrettanto immediato:

// Se accediamo alla select tramite ID
$("@id_select").val(new_valore);

// Se accediamo alla select tramite name
$("select[name=nome_campo]").val(new_valore);

L’unica considerazione a riguardo è che il contenuto della variabile “new_valore” deve essere, logicamente, una voce presente in select.

Passiamo ora ai radio button.
Anche in questo caso il metodo val() ci aiuta a verificare quale radio button del gruppo è selezionato e ad effettuare il check dinamico di uno di essi.

// Accediamo al radio button tramite la coppia type - name
var valore = $("input[type=radio][name=nome_campo]:checked").val();

// Immpostiamo il check di un radio button
$("input[type=radio][name=nome_campo]").val([new_valore]);

In fase di lettura, la variabile “valore” conterrà il value del radio button selezionato; qualora nessuno sia selezionato il risultato sarà “null“.
Per impostare il check di un radio button è necessario prestare un pò di attenzione al parametro del metodo val(), “new_valore” si riferisce al value di uno dei radio button del gruppo, racchiuso tra parentesi quadre ,val([new_valore]).

Infine accediamo agli elementi di tipo checkbox.

// Se accediamo al checkbox tramite ID
var valore = $("#id_checkbox:checked").val();

// Se accediamo al checkbox tramite coppia type - name
var valore = $("input[type=checkbox][name=nome_campo]:checked").val();

La variabile “valore” conterrà il value del checkbox se questo è selezionato, altrimenti “null“.
Per effettuare il check invece:

// Se accediamo al checkbox tramite ID
$("#id_checkbox").val([new_valore]);

// Se accediamo al checkbox tramite coppia type - name
$("input[type=checkbox][name=nome_campo]").val([new_valore]);

Come per i radio button, anche il checkbox prevede come “new_valore” il value del checkbox racchiuso tra parentesi quadre.

Per dimostrare le capacità del metodo .val() di jQuery ho racchiuso il codice presentato in alcune funzioni parametrizzate e richiamate su un form di esempio.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.