Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

jQuery: recuperare il valore di un campo di un form.

Scritto da Fare-internet il 27 ottobre 2010 condividi condividi

jQuery formRecuperare il valore di un campo di un form con jQuery è abbastanza semplice.

Se utilzziamo jQuery per recuperare i valori non è necessario ne assegnare un name al form, ne tantomeno assegnare un id al campo, infatti utlizzando il selettore e il name del campo di testo siamo in grado di accedere al valore del textfield.
L’unica cosa a cui dobbiamo fare attenzione è che qualora avessimo più form dovremmo comunque assegnare name diversi, altrimenti non avremmo un riferimento univoco.

Supponiamo di avere un semplice form con all’interno un campo di testo il cui attributo name ha valore testo1.

<form>
   <input type="text" name="testo1" value="ciao"/>
</form>

Per recuperare il valore contenuto in questo campo è sufficente il seguente codice jQuery:

$(‘[name="testo1"]’).val();

Stesso approccio se avessimo una textarea o un select:

<form>
   <textarea name="myTxtArea" style="width:400px;height95px;"></textarea>
   <select name="selectBox">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
    </select>
</form>

Per recuperare i valori ci basterà rispettivamente scrivere:

$(‘[name="myTxtArea"]’).val();
$(‘[name="selectBox"]’).val();

Anche in questo caso l’unico riferimento necessario è il nome del campo.

Un po’ diversa è la situazione per i radio button:

<form>
    <input type="radio" name="myRad" value="1" checked="checked" /> 1
    <input type="radio" name="myRad" value="2" /> 2
    <input type="radio" name="myRad" value="3" /> 3
</form>

In questo caso avendo tutti lo stesso name ci viene sempre restituito il valore del primo, quindi dobbiamo specificare di restituirci il valore del radio selezionato:

$(‘[name="myRad"]:checked’).val();

Aggiungiamo due funzioni parametriche per il controllo dei campi di “testo” e dei radio, queste funzioni non fannno altro che lanciare un alert con il valore del campo :

function getValByName($name){
        var $val = $(‘[name="’+$name+‘"]’).val();
        alert($val);
}
function getRadioByName($name){
        var $val = $(‘[name="’+$name+‘"]:checked’).val();
        alert($val);
}

Per una demo di quanto trattato nell’articolo potete andare alla pagina: http://demo.studio-88.it/formDemo/

Tag: , ,  

Twitter