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:
Con una funzione PHP un programmatore php può trasformare una url youtube, vimeo o dailymotion in un codice embed
Come un Programmatore JQuery può realizzare un Conto alla Rovescia in perfetto stile Groupon
Brevissima Guida per un Programmatore che vuole Importare / Migrare un database Access o MS SQL in un database MySQL, utile soprattutto per Programmatori PHP che creano siti dinamici e che vogliono recuperare contenuti di database Access
Il codice Javascript che potete utilizzare per interrogare le API di Facebook e ottenere le reactions relative da trasmettere Live su Facebook
Grazie ad una simpatica applicazione Google promuovi il tuo sito in maniera gratuita e simpatica, io ad esempio l'ho utilizzato per promuovermi come Programmatore PHP


buzzoole code
Leggi altro:
Proteggere una Pagina con PHP

Durante questa settimana un Stagista che lavora nell'azienda per il quale collaboro mi ha chiesto se potevo fare un esempio...

Chiudi