bloggers bloggers

Lavorare sugli elementi di un form (ma non solo) con Alloy UI è abbastanza semplice; tuttavia possono esserci casi in cui non sia effettivamente così semplice ed immediato.

Uno di questi casi è rappresentato dal recupero del valore selezionato in un radio button.Perchè?!

Il motivo è legato alla modalità con cui normalmente si recupera la reference di un elemento del DOM con Alloy UI, ossia per id:

A.one('#<portlet: namespace />element_id');

Supponiamo quindi di avere definito un radio group nel modo seguente:

<aui:input label="choice-1" name="myRadio" type="radio" value="1" />

<aui:input label="choice-2" name="myRadio" type="radio" value="2" />

<aui:input label="choice-3" name="myRadio" type="radio" value="3" />

La cosa da notare è che l'attributo name è (e deve essere) uguale per tutti gli elementi, mentre l'attributo id non è presente; ciò significa che la taglib creerà un id univoco random per ogni elementi e quindi non sappiamo a priori che valore avrà.

Ovviamete se definissimo un idesplicito per ogni elemento il problema non ci sarebbe ed io avrei finito di scrivere questo post...

Se invece siete nel caso sopra citato, basta lavorare con un pò di selettori CSS per recuperare la reference all'elemento selezionato. Come?! Così:

var element =

A.one("input[name=<portlet:namespace/>myRadio]:checked");

In realtà sarebbe sempre meglio fare riferimento ad un elemento contenitore come ad esempio il form di appartenenza:

var element =

A.one("#<portlet:namespace/>fm input[name=<portlet:namespace/>myRadio]:checked");

Fate solo attenzione ad una cosa: se nessuno dei radio button è selezionato, la funzione A.one restituisce null quindi occhio ad utilizzare il suo valore di ritorno.