Form: Combobox o Finestre di dialogo?
24 April 2006
Ciao amici 
Con il post di oggi entriamo in un argomento leggermente più complesso (a livello teorico più che altro) rispetto a quanto trattato precedentemente riguardo i controlli su un form html.
Quando si inseriscono dati è buona abitudine cercare di velocizzare il lavoro dell’utente tramite strumenti che gli permettano di selezionare determinati tipi di informazioni anzichè digitarle (ad esempio la nazionalità oppure il sesso).
Ciò porta un vantaggio da entrambe le parti:
- Per noi web designers è ulteriore garanzia di integrità dei dati forniti, essendo l’utente “obbligato” a fornire le informazioni secondo le nostre indicazioni.
- Per l’utente è, insieme ai controlli che abbiamo già predisposto, un ulteriore “aiuto” alla compilazione del form.
Dopo questa breve introduzione cerchiamo di capire in che modo implementare una soluzione del genere utilizzando il form di inserimento già presentato precedentemente, nel quale abbiamo già provveduto ad inserire tutti i controlli del caso.
Faremo quindi in modo che il campo “localita” sia selezionabile e non digitabile.
HTML e Javascript ci mettono a disposizione 2 oggetti per far fronte al nostro problema: il tag SELECT e la finestra di dialogo.
Il tag SELECT permette di creare all’interno del nostro form un oggetto di tipo “combobox” altresì noto ai più come “menù a tendina” nel quale poi potremo andare ad inserire gli elementi selezionabili dall’utente attraverso il tag OPTION.
Ai fini del recupero dei dati si andrà sempre ad utilizzare la proprietà VALUE dell’oggetto, ma questa volta sarà relativa all’elemento correntemente selezionato.
Nel nostro caso avremo poi come ulteriore vantaggio il fatto che nel tag select è consentita solo la selezione di un elemento e quindi non potremo andare a digitare.
Il secondo esempio sfrutta un’altro oggetto molto utile ed è la finestra di dialogo.
Una finestra di dialogo altro non è che una pagina HTML che viene presentata all’utente in modo da rimanere in “attesa” finchè non riceve un input, restituendo poi un valore alla sua chiusura.
Nel nostro caso utilizzeremo tale tecnica per presentare un elenco delle località disponibili rimanendo in attesa che l’utente ne selezioni una e successivamente andremo a chiudere la finestra e riportare il valore selezionato nel relativo campo del form.
Il sistema è molto semplice:
- Una funzione javascript risiede nel form ed “apre” la finestra di dialogo con l’istruzione showmodaldialog avente come parametro il nome della pagina html da aprire. L’istruzione è associata ad una variabile nella quale verrà immagazzinato il valore restituito dalla finestra stessa alla sua chiusura. Successivamente si utilizzerà tale variabile per cambiare il VALUE della casella di testo della località.
- La seconda funzione è invece nella pagina utilizzata come finestra di dialogo e non fa altro che ricevere il valore selezionato dall’utente e passarlo alla proprietà returnvalue della finestra e successivamente chiuderla.
La combinazione di queste due funzioni fa si che l’utente selezioni il bottone che apre la finestra di dialogo, scelga un valore dall’elenco e che tale valore venga “copiato” nella casella di testo relativa.
Per rendere un po’ più “cool” 
il tutto abbiamo inserito nell’elenco delle località un’evidenziazione dell’elemento su cui passa il mouse attraverso del semplice codice di modifica dello style inserito negli eventi mouseover e mouseout della cella.
il tutto abbiamo inserito nell’elenco delle località un’evidenziazione dell’elemento su cui passa il mouse attraverso del semplice codice di modifica dello style inserito negli eventi mouseover e mouseout della cella.In questo caso l’utente ,a differenza della combobox, potrà anche digitare (ricordiamoci che località rimane comunque una casella di testo) ma basterà aggiungere readonly nel tag INPUT della località per “bloccare” la digitazione lasciando così solo la selezione.
Il primo esempio
Il secondo esempio
Purtroppo dopo alcune prove abbiamo appurato che la soluzione con la finestra di dialogo non funziona sul Browser Firefox e pertanto invitiamo gli amici che lo utilizzano a prendere per buono l’esempio con la combobox.
Il secondo esempio
Purtroppo dopo alcune prove abbiamo appurato che la soluzione con la finestra di dialogo non funziona sul Browser Firefox e pertanto invitiamo gli amici che lo utilizzano a prendere per buono l’esempio con la combobox.
Spero che anche in questo caso il materiale proposto possa esservi di aiuto e mi auguro soprattutto di essere stato sufficientemente chiaro nella spiegazione. 
Ciauz
Vittorio B
Partorito da
th April 24th, 2006 alle 11:12
Piccolo appunto…
Se avete a disposizione uno spazio web dinamico potete utilizzare la tecnica della finestra di dialogo anche con una pagina ASP oppure PHP che prende i dati da un database