Form Dinamico Javascript, Form Dinamico, Script Javascript, Select dinamica, select combinata, Javascript, Programmatore di Napoli, Programmatore PHP

Creazione una Select Dinamica con Javascript



In questo mio nuovo post, è dedicato a quello che personalmente ritegno dopo MySQL il partner ideale per un Programmatore PHP, Javascript a differenza di PHP è un linguaggio lato client, cioè interpretato dal browser ad ogni nuova richiesta client (utente o pagina), è può risultare utile per molteplici funzioni di controllo o gestione di una pagina, fino ad arrivare alle interazioni complesse.

In questo esempio mostrerò come realizzare uno Script Javascript per una select combinata, cioè che seleziona il valore del secondo campo in funzione di quello scelto nel primo (Guarda l’esempio), lo farò in maniera semplice senza scomodare AJAX e/o PHP che non escludo di mostrare in un esempio successivo.

Forum di con i due campi legati, da notare che a ogni cambiamento di valore nella prima select campo_principale corrisponderà una chiamata alla funzione javascript aggiornaOpzioni() che esamineremo di seguito:

...
<form name="form">
Seleziona Pizza:
<select name="campo_principale" size="1" onChange="aggiornaOpzioni();">
<option value="1">Pizza Margherita</option>
<option value="2">Pizza Marinara</option>
<option value="3">Pizza Capricciosa</option>
</select>
<br />
<br />
Seleziona Ingrediente:
<select name="campo_der" size="1">
</select>
</form>
...

Nell’esempio da buon Programmatore PHP di Napoli, ho usato 3 diverse tipologie di pizze e selezionando una delle 3 pizze nel secondo esempio vedremo una selezione di ingredienti che la compone.

Queste sono le due funzioni Javascript da comprendere prima della chiusura del tag </head>:

<script language="javascript">
/*Questa funzione legga il valore passato come parametro
e dato il valore aggiunge delle opzioni al secondo campo*/
function selezionaOpzioni(scelta) {
/*Resetto le opzioni precedenti del campo*/
var campo_der = document.form.campo_der;
campo_der.options.length = 0;
/*verifico la scelta e aggiungo i campi*/
if (scelta == "1") {
campo_der.options[campo_der.options.length] = new Option('Pomodoro');
campo_der.options[campo_der.options.length] = new Option('Mozzarella');
campo_der.options[campo_der.options.length] = new Option('Basilico');
}
if (scelta == "2") {
campo_der.options[campo_der.options.length] = new Option('Pomodoro');
campo_der.options[campo_der.options.length] = new Option('Aglio');
campo_der.options[campo_der.options.length] = new Option('Origano');
}
if (scelta == "3") {
campo_der.options[campo_der.options.length] = new Option('Pomodoro');
campo_der.options[campo_der.options.length] = new Option('Funghi');
campo_der.options[campo_der.options.length] = new Option('Olive');
campo_der.options[campo_der.options.length] = new Option('Carciofini');
}
}

Questa funzione prende il valore del campo_principale e fa una chiamata alla funzione selezionaOpzioni passando il parametro selezionato:


function aggiornaOpzioni(scelta){
var selezionato = document.form.campo_principale.selectedIndex;
var campo = document.form.campo_principale.options;
selezionaOpzioni(campo[selezionato].value);
}
</script>
...

è ovvio che quest’esempio può essere ampliato e modificato da un Programmatore PHP con un po di esperienza, affinché le opzioni ad esempio possano derivare da una query a database e rendere lo script del tutto dinamico.

PER ULTERIORI INFORMAZIONI:

Daniele Tabacco
Programmatore PHP | Web Developer | Consulente Web e SEO

PHP - MySql - AJAX - HTML5 - JAVASCRIPT - CSS - JSON/XML - JQuery
WebApps, Applicazioni, Realizzazione Siti Mobile per iPhone e Android
Programmatore PHP - Consulente Web Marketing Napoli, Roma, Milano, Firenze.
Tel.+39 329.11.73.918
email: daniele.tabacco[at]gmail.com
skype: daniele.tabacco

Il tuo nome (richiesto)

La tua email (richiesto)

Oggetto

Il tuo messaggio

 


POTREBBE INTERESSARTI ANCHE:
Le Applicazioni Web di un Programmatore PHP diventano sempre più particolari e interattive ecco perchè saper realizzare un Drag e Drop con Javascript potrebbe risultare utile per lo Sviluppo Web e necessaio per interfaccie UserFriendly
HTML5 rappresenta il nuovo Standard di Sviluppo per il Web che come Programmatore PHP e MySQL cattura la mia attenzione, presenterò dei brevi articoli che illustreranno le novità dello standard per lo sviluppo siti internet e applicazioni web
Guida all'utilizzo delle Join INNER, CROSS e OUTER che permettono di incrociare i dati derivanti dal database per selezioni multiple da più tabelle, utilissime per le applicazioni dinamiche.
Programmazione HTML5, un piccolo esempio sulla funzionalità di Geolocalizzazione
Vuoi redere il tuo sito ancora più Social e vuoi che sia presente su Facebook? Grazie alle Open Graph anche chi non è Programmatore PHP potrà integrare il proprio sito nel network Facebook


buzzoole code
Leggi altro:
Integrare una Fotogallery Flickr nel Proprio Sito

Lavorare in Ambito Web, significa spesso dover Anticipare Le Mosse per non rischiare di restare indietro, ecco perché in questi...

Chiudi