Combobox regione e provincia referenziate tramite JavaScript
Nell’articolo ComboBox pronte all’uso: select nazioni, regioni e province ho condiviso l’HTML delle combobox di nazione, regione e provincia per offrirti un comodo copia-incolla.
Oggi condivido l’HTML e una funzione JavaScript che ti permetterà di implementare le combo regione e provincia “referenziate“. In pratica, selezionando una regione nella prima combobox, verranno poi caricate le rispettive province nella seconda.
Combo regioni
<select id="regione" name="regione" onchange="javascript:loadProvincia(this.value);"> <option value="" selected>Seleziona</option> <option value="abruzzo">abruzzo</option> <option value="basilicata">basilicata</option> <option value="calabria">calabria</option> <option value="campania">campania</option> <option value="emilia romagna">emilia romagna</option> <option value="friuli venezia giulia">friuli venezia giulia</option> <option value="lazio">lazio</option> <option value="liguria">liguria</option> <option value="lombardia">lombardia</option> <option value="marche">marche</option> <option value="molise">molise</option> <option value="piemonte">piemonte</option> <option value="puglia">puglia</option> <option value="sardegna">sardegna</option> <option value="sicilia">sicilia</option> <option value="toscana">toscana</option> <option value="trentino alto adige">trentino alto adige</option> <option value="umbria">umbria</option> <option value="valle d'aosta">valle d'aosta</option> <option value="veneto">veneto</option> </select>
Combo province
<select id="provincia" name="provincia"> <option value="" selected>Seleziona</option> </select>
Combo regioni (edit version)
<select id="regione" name="regione" onchange="javascript:loadProvincia(this.value);"> <option value="" <?php if ($regione=="") echo "selected"; ?> >Seleziona</option> <option value="abruzzo" <?php if ($regione=="abruzzo") echo "selected"; ?> >abruzzo</option> <option value="basilicata" <?php if ($regione=="basilicata") echo "selected"; ?> >basilicata</option> <option value="calabria" <?php if ($regione=="calabria") echo "selected"; ?> >calabria</option> <option value="campania" <?php if ($regione=="campania") echo "selected"; ?> >campania</option> <option value="emilia romagna" <?php if ($regione=="emilia romagna") echo "selected"; ?> >emilia romagna</option> <option value="friuli venezia giulia" <?php if ($regione=="friuli venezia giulia") echo "selected"; ?> >friuli venezia giulia</option> <option value="lazio" <?php if ($regione=="lazio") echo "selected"; ?> >lazio</option> <option value="liguria" <?php if ($regione=="liguria") echo "selected"; ?> >liguria</option> <option value="lombardia" <?php if ($regione=="lombardia") echo "selected"; ?> >lombardia</option> <option value="marche" <?php if ($regione=="marche") echo "selected"; ?> >marche</option> <option value="molise" <?php if ($regione=="molise") echo "selected"; ?> >molise</option> <option value="piemonte" <?php if ($regione=="piemonte") echo "selected"; ?> >piemonte</option> <option value="puglia" <?php if ($regione=="puglia") echo "selected"; ?> >puglia</option> <option value="sardegna" <?php if ($regione=="sardegna") echo "selected"; ?> >sardegna</option> <option value="sicilia" <?php if ($regione=="sicilia") echo "selected"; ?> >sicilia</option> <option value="toscana" <?php if ($regione=="toscana") echo "selected"; ?> >toscana</option> <option value="trentino alto adige" <?php if ($regione=="trentino alto adige") echo "selected"; ?> >trentino alto adige</option> <option value="umbria" <?php if ($regione=="umbria") echo "selected"; ?> >umbria</option> <option value="valle d'aosta" <?php if ($regione=="valle d'aosta") echo "selected"; ?> >valle d'aosta</option> <option value="veneto" <?php if ($regione=="veneto") echo "selected"; ?> >veneto</option> </select>
Combo province (edit version)
<select id="provincia" name="provincia"> <option value="" <?php if ($provincia=="") echo "selected"; ?> >Seleziona</option> <option value="Agrigento" <?php if ($provincia=="Agrigento") echo "selected"; ?> >Agrigento</option> <option value="Alessandria" <?php if ($provincia=="Alessandria") echo "selected"; ?> >Alessandria</option> <option value="Ancona" <?php if ($provincia=="Ancona") echo "selected"; ?> >Ancona</option> <option value="Aosta" <?php if ($provincia=="Aosta") echo "selected"; ?> >Aosta</option> <option value="Arezzo" <?php if ($provincia=="Arezzo") echo "selected"; ?> >Arezzo</option> <option value="Ascoli Piceno" <?php if ($provincia=="Ascoli Piceno") echo "selected"; ?> >Ascoli Piceno</option> <option value="Asti" <?php if ($provincia=="Asti") echo "selected"; ?> >Asti</option> <option value="Avellino" <?php if ($provincia=="Avellino") echo "selected"; ?> >Avellino</option> <option value="Bari" <?php if ($provincia=="Bari") echo "selected"; ?> >Bari</option> <option value="Barletta-Andria-Trani" <?php if ($provincia=="Barletta-Andria-Trani") echo "selected"; ?> >Barletta-Andria-Trani</option> <option value="Belluno" <?php if ($provincia=="Belluno") echo "selected"; ?> >Belluno</option> <option value="Benevento" <?php if ($provincia=="Benevento") echo "selected"; ?> >Benevento</option> <option value="Bergamo" <?php if ($provincia=="Bergamo") echo "selected"; ?> >Bergamo</option> <option value="Biella" <?php if ($provincia=="Biella") echo "selected"; ?> >Biella</option> <option value="Bologna" <?php if ($provincia=="Bologna") echo "selected"; ?> >Bologna</option> <option value="Bolzano" <?php if ($provincia=="Bolzano") echo "selected"; ?> >Bolzano</option> <option value="Brescia" <?php if ($provincia=="Brescia") echo "selected"; ?> >Brescia</option> <option value="Brindisi" <?php if ($provincia=="Brindisi") echo "selected"; ?> >Brindisi</option> <option value="Cagliari" <?php if ($provincia=="Cagliari") echo "selected"; ?> >Cagliari</option> <option value="Caltanissetta" <?php if ($provincia=="Caltanissetta") echo "selected"; ?> >Caltanissetta</option> <option value="Caserta" <?php if ($provincia=="Caserta") echo "selected"; ?> >Caserta</option> <option value="Catania" <?php if ($provincia=="Catania") echo "selected"; ?> >Catania</option> <option value="Catanzaro" <?php if ($provincia=="Catanzaro") echo "selected"; ?> >Catanzaro</option> <option value="Chieti" <?php if ($provincia=="Chieti") echo "selected"; ?> >Chieti</option> <option value="Como" <?php if ($provincia=="Como") echo "selected"; ?> >Como</option> <option value="Cosenza" <?php if ($provincia=="Cosenza") echo "selected"; ?> >Cosenza</option> <option value="Cremona" <?php if ($provincia=="Cremona") echo "selected"; ?> >Cremona</option> <option value="Crotone" <?php if ($provincia=="Crotone") echo "selected"; ?> >Crotone</option> <option value="Cuneo" <?php if ($provincia=="Cuneo") echo "selected"; ?> >Cuneo</option> <option value="Enna" <?php if ($provincia=="Enna") echo "selected"; ?> >Enna</option> <option value="Ferrara" <?php if ($provincia=="Ferrara") echo "selected"; ?> >Ferrara</option> <option value="Firenze" <?php if ($provincia=="Firenze") echo "selected"; ?> >Firenze</option> <option value="Foggia" <?php if ($provincia=="Foggia") echo "selected"; ?> >Foggia</option> <option value="Forlì-Cesena" <?php if ($provincia=="Forlì-Cesena") echo "selected"; ?> >Forlì-Cesena</option> <option value="Frosinone" <?php if ($provincia=="Frosinone") echo "selected"; ?> >Frosinone</option> <option value="Genova" <?php if ($provincia=="Genova") echo "selected"; ?> >Genova</option> <option value="Gorizia" <?php if ($provincia=="Gorizia") echo "selected"; ?> >Gorizia</option> <option value="Grosseto" <?php if ($provincia=="Grosseto") echo "selected"; ?> >Grosseto</option> <option value="Imperia" <?php if ($provincia=="Imperia") echo "selected"; ?> >Imperia</option> <option value="L\'Aquila" <?php if ($provincia=="L\'Aquila") echo "selected"; ?> >L\'Aquila</option> <option value="La Spezia" <?php if ($provincia=="La Spezia") echo "selected"; ?> >La Spezia</option> <option value="Latina" <?php if ($provincia=="Latina") echo "selected"; ?> >Latina</option> <option value="Lecce" <?php if ($provincia=="Lecce") echo "selected"; ?> >Lecce</option> <option value="Lecco" <?php if ($provincia=="Lecco") echo "selected"; ?> >Lecco</option> <option value="Livorno" <?php if ($provincia=="Livorno") echo "selected"; ?> >Livorno</option> <option value="Lodi" <?php if ($provincia=="Lodi") echo "selected"; ?> >Lodi</option> <option value="Lucca" <?php if ($provincia=="Lucca") echo "selected"; ?> >Lucca</option> <option value="Macerata" <?php if ($provincia=="Macerata") echo "selected"; ?> >Macerata</option> <option value="Mantova" <?php if ($provincia=="Mantova") echo "selected"; ?> >Mantova</option> <option value="Massa Carrara" <?php if ($provincia=="Massa Carrara") echo "selected"; ?> >Massa Carrara</option> <option value="Matera" <?php if ($provincia=="Matera") echo "selected"; ?> >Matera</option> <option value="Messina" <?php if ($provincia=="Messina") echo "selected"; ?> >Messina</option> <option value="Milano" <?php if ($provincia=="Milano") echo "selected"; ?> >Milano</option> <option value="Modena" <?php if ($provincia=="Modena") echo "selected"; ?> >Modena</option> <option value="Monza Brianza" <?php if ($provincia=="Monza Brianza") echo "selected"; ?> >Monza Brianza</option> <option value="Napoli" <?php if ($provincia=="Napoli") echo "selected"; ?> >Napoli</option> <option value="Novara" <?php if ($provincia=="Novara") echo "selected"; ?> >Novara</option> <option value="Nuoro" <?php if ($provincia=="Nuoro") echo "selected"; ?> >Nuoro</option> <option value="Olbia-Tempio" <?php if ($provincia=="Olbia-Tempio") echo "selected"; ?> >Olbia-Tempio</option> <option value="Oristano" <?php if ($provincia=="Oristano") echo "selected"; ?> >Oristano</option> <option value="Padova" <?php if ($provincia=="Padova") echo "selected"; ?> >Padova</option> <option value="Palermo" <?php if ($provincia=="Palermo") echo "selected"; ?> >Palermo</option> <option value="Parma" <?php if ($provincia=="Parma") echo "selected"; ?> >Parma</option> <option value="Pavia" <?php if ($provincia=="Pavia") echo "selected"; ?> >Pavia</option> <option value="Perugia" <?php if ($provincia=="Perugia") echo "selected"; ?> >Perugia</option> <option value="Pesaro e Urbino" <?php if ($provincia=="Pesaro e Urbino") echo "selected"; ?> >Pesaro e Urbino</option> <option value="Pescara" <?php if ($provincia=="Pescara") echo "selected"; ?> >Pescara</option> <option value="Piacenza" <?php if ($provincia=="Piacenza") echo "selected"; ?> >Piacenza</option> <option value="Pisa" <?php if ($provincia=="Pisa") echo "selected"; ?> >Pisa</option> <option value="Pistoia" <?php if ($provincia=="Pistoia") echo "selected"; ?> >Pistoia</option> <option value="Pordenone" <?php if ($provincia=="Pordenone") echo "selected"; ?> >Pordenone</option> <option value="Potenza" <?php if ($provincia=="Potenza") echo "selected"; ?> >Potenza</option> <option value="Prato" <?php if ($provincia=="Prato") echo "selected"; ?> >Prato</option> <option value="Ragusa" <?php if ($provincia=="Ragusa") echo "selected"; ?> >Ragusa</option> <option value="Ravenna" <?php if ($provincia=="Ravenna") echo "selected"; ?> >Ravenna</option> <option value="Reggio Calabria" <?php if ($provincia=="Reggio Calabria") echo "selected"; ?> >Reggio Calabria</option> <option value="Repubblica di San Marino" <?php if ($provincia=="Repubblica di San Marino") echo "selected"; ?> >Repubblica di San Marino</option> <option value="Rieti" <?php if ($provincia=="Rieti") echo "selected"; ?> >Rieti</option> <option value="Rimini" <?php if ($provincia=="Rimini") echo "selected"; ?> >Rimini</option> <option value="Roma" <?php if ($provincia=="Roma") echo "selected"; ?> >Roma</option> <option value="Rovigo" <?php if ($provincia=="Rovigo") echo "selected"; ?> >Rovigo</option> <option value="Salerno" <?php if ($provincia=="Salerno") echo "selected"; ?> >Salerno</option> <option value="Sassari" <?php if ($provincia=="Sassari") echo "selected"; ?> >Sassari</option> <option value="Savona" <?php if ($provincia=="Savona") echo "selected"; ?> >Savona</option> <option value="Siena" <?php if ($provincia=="Siena") echo "selected"; ?> >Siena</option> <option value="Siracusa" <?php if ($provincia=="Siracusa") echo "selected"; ?> >Siracusa</option> <option value="Sondrio" <?php if ($provincia=="Sondrio") echo "selected"; ?> >Sondrio</option> <option value="Taranto" <?php if ($provincia=="Taranto") echo "selected"; ?> >Taranto</option> <option value="Teramo" <?php if ($provincia=="Teramo") echo "selected"; ?> >Teramo</option> <option value="Terni" <?php if ($provincia=="Terni") echo "selected"; ?> >Terni</option> <option value="Torino" <?php if ($provincia=="Torino") echo "selected"; ?> >Torino</option> <option value="Trapani" <?php if ($provincia=="Trapani") echo "selected"; ?> >Trapani</option> <option value="Trento" <?php if ($provincia=="Trento") echo "selected"; ?> >Trento</option> <option value="Treviso" <?php if ($provincia=="Treviso") echo "selected"; ?> >Treviso</option> <option value="Trieste" <?php if ($provincia=="Trieste") echo "selected"; ?> >Trieste</option> <option value="Udine" <?php if ($provincia=="Udine") echo "selected"; ?> >Udine</option> <option value="Varese" <?php if ($provincia=="Varese") echo "selected"; ?> >Varese</option> <option value="Venezia" <?php if ($provincia=="Venezia") echo "selected"; ?> >Venezia</option> <option value="Verb-Cus-Ossola" <?php if ($provincia=="Verb-Cus-Ossola") echo "selected"; ?> >Verb-Cus-Ossola</option> <option value="Vercelli" <?php if ($provincia=="Vercelli") echo "selected"; ?> >Vercelli</option> <option value="Verona" <?php if ($provincia=="Verona") echo "selected"; ?> >Verona</option> <option value="Vibo Valentia" <?php if ($provincia=="Vibo Valentia") echo "selected"; ?> >Vibo Valentia</option> <option value="Vicenza" <?php if ($provincia=="Vicenza") echo "selected"; ?> >Vicenza</option> <option value="Viterbo" <?php if ($provincia=="Viterbo") echo "selected"; ?> >Viterbo</option> </select>
Ed ecco la funzione JavaScript
function loadProvincia(param) { var str = ""; if (param=="") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Agrigento">Agrigento</option>'; str += '<option value="Alessandria">Alessandria</option>'; str += '<option value="Ancona">Ancona</option>'; str += '<option value="Aosta">Aosta</option>'; str += '<option value="Arezzo">Arezzo</option>'; str += '<option value="Ascoli Piceno">Ascoli Piceno</option>'; str += '<option value="Asti">Asti</option>'; str += '<option value="Avellino">Avellino</option>'; str += '<option value="Bari">Bari</option>'; str += '<option value="Barletta-Andria-Trani">Barletta-Andria-Trani</option>'; str += '<option value="Belluno">Belluno</option>'; str += '<option value="Benevento">Benevento</option>'; str += '<option value="Bergamo">Bergamo</option>'; str += '<option value="Biella">Biella</option>'; str += '<option value="Bologna">Bologna</option>'; str += '<option value="Bolzano">Bolzano</option>'; str += '<option value="Brescia">Brescia</option>'; str += '<option value="Brindisi">Brindisi</option>'; str += '<option value="Cagliari">Cagliari</option>'; str += '<option value="Caltanissetta">Caltanissetta</option>'; str += '<option value="Caserta">Caserta</option>'; str += '<option value="Catania">Catania</option>'; str += '<option value="Catanzaro">Catanzaro</option>'; str += '<option value="Chieti">Chieti</option>'; str += '<option value="Como">Como</option>'; str += '<option value="Cosenza">Cosenza</option>'; str += '<option value="Cremona">Cremona</option>'; str += '<option value="Crotone">Crotone</option>'; str += '<option value="Cuneo">Cuneo</option>'; str += '<option value="Enna">Enna</option>'; str += '<option value="Ferrara">Ferrara</option>'; str += '<option value="Firenze">Firenze</option>'; str += '<option value="Foggia">Foggia</option>'; str += '<option value="Forlì-Cesena">Forlì-Cesena</option>'; str += '<option value="Frosinone">Frosinone</option>'; str += '<option value="Genova">Genova</option>'; str += '<option value="Gorizia">Gorizia</option>'; str += '<option value="Grosseto">Grosseto</option>'; str += '<option value="Imperia">Imperia</option>'; str += '<option value="L\'Aquila">L\'Aquila</option>'; str += '<option value="La Spezia">La Spezia</option>'; str += '<option value="Latina">Latina</option>'; str += '<option value="Lecce">Lecce</option>'; str += '<option value="Lecco">Lecco</option>'; str += '<option value="Livorno">Livorno</option>'; str += '<option value="Lodi">Lodi</option>'; str += '<option value="Lucca">Lucca</option>'; str += '<option value="Macerata">Macerata</option>'; str += '<option value="Mantova">Mantova</option>'; str += '<option value="Massa Carrara">Massa Carrara</option>'; str += '<option value="Matera">Matera</option>'; str += '<option value="Messina">Messina</option>'; str += '<option value="Milano">Milano</option>'; str += '<option value="Modena">Modena</option>'; str += '<option value="Monza Brianza">Monza Brianza</option>'; str += '<option value="Napoli">Napoli</option>'; str += '<option value="Novara">Novara</option>'; str += '<option value="Nuoro">Nuoro</option>'; str += '<option value="Olbia-Tempio">Olbia-Tempio</option>'; str += '<option value="Oristano">Oristano</option>'; str += '<option value="Padova">Padova</option>'; str += '<option value="Palermo">Palermo</option>'; str += '<option value="Parma">Parma</option>'; str += '<option value="Pavia">Pavia</option>'; str += '<option value="Perugia">Perugia</option>'; str += '<option value="Pesaro e Urbino">Pesaro e Urbino</option>'; str += '<option value="Pescara">Pescara</option>'; str += '<option value="Piacenza">Piacenza</option>'; str += '<option value="Pisa">Pisa</option>'; str += '<option value="Pistoia">Pistoia</option>'; str += '<option value="Pordenone">Pordenone</option>'; str += '<option value="Potenza">Potenza</option>'; str += '<option value="Prato">Prato</option>'; str += '<option value="Ragusa">Ragusa</option>'; str += '<option value="Ravenna">Ravenna</option>'; str += '<option value="Reggio Calabria">Reggio Calabria</option>'; str += '<option value="Repubblica di San Marino">Repubblica di San Marino</option>'; str += '<option value="Rieti">Rieti</option>'; str += '<option value="Rimini">Rimini</option>'; str += '<option value="Roma">Roma</option>'; str += '<option value="Rovigo">Rovigo</option>'; str += '<option value="Salerno">Salerno</option>'; str += '<option value="Sassari">Sassari</option>'; str += '<option value="Savona">Savona</option>'; str += '<option value="Siena">Siena</option>'; str += '<option value="Siracusa">Siracusa</option>'; str += '<option value="Sondrio">Sondrio</option>'; str += '<option value="Taranto">Taranto</option>'; str += '<option value="Teramo">Teramo</option>'; str += '<option value="Terni">Terni</option>'; str += '<option value="Torino">Torino</option>'; str += '<option value="Trapani">Trapani</option>'; str += '<option value="Trento">Trento</option>'; str += '<option value="Treviso">Treviso</option>'; str += '<option value="Trieste">Trieste</option>'; str += '<option value="Udine">Udine</option>'; str += '<option value="Varese">Varese</option>'; str += '<option value="Venezia">Venezia</option>'; str += '<option value="Verb-Cus-Ossola">Verb-Cus-Ossola</option>'; str += '<option value="Vercelli">Vercelli</option>'; str += '<option value="Verona">Verona</option>'; str += '<option value="Vibo Valentia">Vibo Valentia</option>'; str += '<option value="Vicenza">Vicenza</option>'; str += '<option value="Viterbo">Viterbo</option>'; } if (param=="abruzzo") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Chieti">Chieti</option>'; str += '<option value="L\'Aquila">L\'Aquila</option>'; str += '<option value="Pescara">Pescara</option>'; str += '<option value="Teramo">Teramo</option>'; } if (param=="basilicata") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Matera">Matera</option>'; str += '<option value="Potenza">Potenza</option>'; } if (param=="calabria") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Catanzaro">Catanzaro</option>'; str += '<option value="Cosenza">Cosenza</option>'; str += '<option value="Crotone">Crotone</option>'; str += '<option value="Reggio Calabria">Reggio Calabria</option>'; str += '<option value="Vibo Valentia">Vibo Valentia</option>'; } if (param=="campania") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Avellino">Avellino</option>'; str += '<option value="Benevento">Benevento</option>'; str += '<option value="Caserta">Caserta</option>'; str += '<option value="Napoli">Napoli</option>'; str += '<option value="Salerno">Salerno</option>'; } if (param=="emilia romagna") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Bologna">Bologna</option>'; str += '<option value="Ferrara">Ferrara</option>'; str += '<option value="Forlì-Cesena">Forlì-Cesena</option>'; str += '<option value="Modena">Modena</option>'; str += '<option value="Parma">Parma</option>'; str += '<option value="Piacenza">Piacenza</option>'; str += '<option value="Ravenna">Ravenna</option>'; str += '<option value="Repubblica di San Marino">Repubblica di San Marino</option>'; str += '<option value="Rimini">Rimini</option>'; } if (param=="friuli venezia giulia") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Gorizia">Gorizia</option>'; str += '<option value="Pordenone">Pordenone</option>'; str += '<option value="Trieste">Trieste</option>'; str += '<option value="Udine">Udine</option>'; } if (param=="lazio") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Frosinone">Frosinone</option>'; str += '<option value="Latina">Latina</option>'; str += '<option value="Rieti">Rieti</option>'; str += '<option value="Roma">Roma</option>'; str += '<option value="Viterbo">Viterbo</option>'; } if (param=="liguria") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Genova">Genova</option>'; str += '<option value="Imperia">Imperia</option>'; str += '<option value="La Spezia">La Spezia</option>'; str += '<option value="Savona">Savona</option>'; } if (param=="lombardia") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Bergamo">Bergamo</option>'; str += '<option value="Brescia">Brescia</option>'; str += '<option value="Como">Como</option>'; str += '<option value="Cremona">Cremona</option>'; str += '<option value="Lecco">Lecco</option>'; str += '<option value="Lodi">Lodi</option>'; str += '<option value="Mantova">Mantova</option>'; str += '<option value="Milano">Milano</option>'; str += '<option value="Monza Brianza">Monza Brianza</option>'; str += '<option value="Pavia">Pavia</option>'; str += '<option value="Sondrio">Sondrio</option>'; str += '<option value="Varese">Varese</option>'; } if (param=="marche") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Ancona">Ancona</option>'; str += '<option value="Ascoli Piceno">Ascoli Piceno</option>'; str += '<option value="Macerata">Macerata</option>'; str += '<option value="Pesaro e Urbino">Pesaro e Urbino</option>'; } if (param=="piemonte") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Alessandria">Alessandria</option>'; str += '<option value="Asti">Asti</option>'; str += '<option value="Biella">Biella</option>'; str += '<option value="Cuneo">Cuneo</option>'; str += '<option value="Novara">Novara</option>'; str += '<option value="Torino">Torino</option>'; str += '<option value="Verb-Cus-Ossola">Verb-Cus-Ossola</option>'; str += '<option value="Vercelli">Vercelli</option>'; } if (param=="puglia") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Bari">Bari</option>'; str += '<option value="Barletta-Andria-Trani">Barletta-Andria-Trani</option>'; str += '<option value="Brindisi">Brindisi</option>'; str += '<option value="Foggia">Foggia</option>'; str += '<option value="Lecce">Lecce</option>'; str += '<option value="Taranto">Taranto</option>'; } if (param=="sardegna") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Cagliari">Cagliari</option>'; str += '<option value="Nuoro">Nuoro</option>'; str += '<option value="Olbia-Tempio">Olbia-Tempio</option>'; str += '<option value="Oristano">Oristano</option>'; str += '<option value="Sassari">Sassari</option>'; } if (param=="sicilia") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Agrigento">Agrigento</option>'; str += '<option value="Caltanissetta">Caltanissetta</option>'; str += '<option value="Catania">Catania</option>'; str += '<option value="Enna">Enna</option>'; str += '<option value="Messina">Messina</option>'; str += '<option value="Palermo">Palermo</option>'; str += '<option value="Ragusa">Ragusa</option>'; str += '<option value="Siracusa">Siracusa</option>'; str += '<option value="Trapani">Trapani</option>'; } if (param=="toscana") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Arezzo">Arezzo</option>'; str += '<option value="Firenze">Firenze</option>'; str += '<option value="Grosseto">Grosseto</option>'; str += '<option value="Livorno">Livorno</option>'; str += '<option value="Lucca">Lucca</option>'; str += '<option value="Massa Carrara">Massa Carrara</option>'; str += '<option value="Pisa">Pisa</option>'; str += '<option value="Pistoia">Pistoia</option>'; str += '<option value="Prato">Prato</option>'; str += '<option value="Siena">Siena</option>'; } if (param=="trentino alto adige") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Bolzano">Bolzano</option>'; str += '<option value="Trento">Trento</option>'; } if (param=="umbria") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Perugia">Perugia</option>'; str += '<option value="Terni">Terni</option>'; } if (param=="valle d'aosta") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Aosta">Aosta</option>'; } if (param=="veneto") { str += '<option value="" selected>Seleziona</option>'; str += '<option value="Belluno">Belluno</option>'; str += '<option value="Padova">Padova</option>'; str += '<option value="Rovigo">Rovigo</option>'; str += '<option value="Treviso">Treviso</option>'; str += '<option value="Venezia">Venezia</option>'; str += '<option value="Verona">Verona</option>'; str += '<option value="Vicenza">Vicenza</option>'; } $('#provincia').html(str); }
Invia questo articolo a un amico via email
Finestra confirm con SimpleModal
Con l’articolo Simple Modal: finestre di dialogo personalizzate ti ho segnalato un ottimo plugin jQuery per implementare finestre modali, SimpleModal di Eric Martin.
Piccolo “tips“, se vuoi utilizzare la finestra “confirm” con questo plugin, la sintassi è la seguente:
confirm("Sicuro di voler eliminare l'immagine?", function () { //Operazioni da compiere se si conferma, in questo caso un redirect window.location.href = param; });
Invia questo articolo a un amico via email
TwitteringJS – jQuery Plugin per pubblicare news sul proprio sito tramite Twitter
Oggi voglio condividere con te un plugin per jQuery che ho realizzato per tutti coloro che vogliono pubblicare news sul proprio sito web, comodamente, utilizzando il proprio account Twitter.
Il plugin si chiama TwitteringJS e trovate qui tutti i dettagli per scaricarlo gratuitamente ed utilizzarlo 
Invia questo articolo a un amico via email
MooTools Ajax: come effettuare richieste Ajax con MooTools
Nell’articolo “jQuery Ajax: come effettuare richieste Ajax tramite jQuery” abbiamo visto come poter effettuare delle chiamate Ajax utilizzando il noto framework JavaScript jQuery. Oggi vedremo come interagire con l’oggetto XMLHttpRequest utilizzando un altro famoso framework JS: MooTools.
Come sempre, vi invito a visionare la documentazione ufficiale sull’oggetto Request dove sono elencati e descritti i metodi che si possono utilizzare per costruire chiamate Ajax.
Nell’esempio, che vi illustro di seguito, troverete un div con identificatore univoco “output” dove visualizzeremo il risultato della chiamata che sarà una riga di testo o un paragrafo “lorem ipsum“. Tramite un pulsante con identificatore univoco “bttRequest” richiameremo una pagina PHP (request.php), tramite l’oggetto request, per ottenere in risposta il testo o il paragrafo a seconda di quello che invieremo come parametro “id“.
Se id contiene 1 otterremo in risposta la riga di testo, se contiene 2 otterremo, invece, il paragrafo lorem ipsum. Possiamo decidere cosa ottenere in risposta selezionando il valore comodamente da una select.
Diamo una rapida occhiata al codice HTML:
<div id="output">Status: ok</div> <select id="choose" name="choose"> <option value="1" selected="selected">Text</option> <option value="2">Lorem Ipsum</option> </select> <input type="button" id="bttRequest" value="Ajax Request" />
Visualizziamo ora il codice MooTools:
<script type="text/javascript" src="mootools.js"></script> <script type="text/javascript"> window.addEvent('domready', function() { $('bttRequest').addEvent('click', function(event) { var value = $('choose').get('value'); var myRequest = new Request({ url: 'request.php', method: 'get', onRequest: function(){ $('output').set('text', 'loading...'); }, onSuccess: function(responseText){ $('output').set('text', responseText); }, onFailure: function(responseText){ $('output').set('text', 'Errore nella richiesta!'); } }); myRequest.send('id=' + value); }); }); </script>
Questo è il codice della pagina PHP:
<?php if ($_GET["id"]==1) { echo "This is the text"; } if ($_GET["id"]==2) { echo "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."; } ?>
Potete vedere il codice in azione a questo indirizzo e scaricare i files sorgenti qui sotto 
|
download: MooTools Ajax (39.01KB) added: 20/06/2011 clicks: 181 description: Come effettuare richieste Ajax con MooTools. |
Invia questo articolo a un amico via email
Lightbox per visualizzare foto e gallery: i migliori scripts
In ogni sito che si rispetti, una cosa che non può assolutamente mancare, è l’effetto “lightbox” per la visualizzazione di foto e gallery fotografiche. Il lightbox lo si trova in rete come script realizzato con framework come jQuery, MooTools o Prototype; è molto conosciuto e apprezzato da addetti ai lavori e utenti ed implementarlo è davvero semplice e veloce.
Vediamo, ora, quali sono gli script più usati ed apprezzati per implementare l’effetto “lightbox“:
03) FancyBox
04) FancyZoom
05) ImageZoom
06) LyteBox
07) PiroBox
09) SlimBox
10) ThickBox
12) FaceBox
Se ne conosci altri segnalaceli nei commenti
Invia questo articolo a un amico via email
PHP IP Geolocation grazie alle API di IPinfoDB
Nell’era del mobile, degli Smartphone e di Foursquare, offrire la geolocalizzazione ai propri utenti è quanto mai di moda…oltre a essere una risorsa molto importante per la web analytics.
Per noi web developer, esistono diversi servizi che permettono di geolocalizzare tramite indirizzo IP; uno che ho provato e che mi sento di consigliarvi è IPinfoDB. La registrazione è semplice e gratuita, subito dopo aver inviato le informazioni si ottiene la API Key con cui poter utilizzare le API messe a disposizione dal servizio.
In questa pagina è illustrato come si utilizzano le API ed, inoltre, è possibile scaricare una comoda classe PHP che possiamo utilizzare nelle nostre web applications. Le informazioni restituite dalle API sono il nome della nazione, della regione, della città, latitudine e longitudine. E’ possibile leggere le informazioni anche tramite JavaScript in formato XML o JSON.
Un ottimo servizio estremamente utile per geolocalizzare tramite indirizzo IP, tu l’hai mai provato? Conosci altri servizi validi che puoi suggerirci?
Invia questo articolo a un amico via email
Framework per lo sviluppo Mobile
Negli ultimi tempi si è parlato molto delle tecnologie del futuro, dei nuovi strumenti per lo sviluppo di siti e applicazioni (html5 su tutti) e della direzione in cui il web sta andando. Tutti sembrano concordare su un punto: il futuro del web è mobile. Con questo punto di vista sono abbastanza d’accordo, già oggi, il mobile ha acquisito un’importanza estremamente rilevante anche grazie alla grande diffusione di dispositivi come l’iPhone, il BlackBerry, i Tablet e grazie a sistemi come iOS e Android.
Anche se il futuro del web è mobile, il presente non scherza: il sempre crescente accesso al web tramite smartphone o tablet è una grande certezza, una certezza che non può che convincerci a sviluppare siti e applicazioni ottimizzate per i dispositivi mobili fin da subito. Anche in chiave business un’occasione importante su cui puntare già oggi. Se i blog sono quasi tutti dotati di una versione ottimizzata per il mobile, grazie a plugin come WPtouch o mobilePress, per i siti aziendali la situazione non è proprio la stessa. Sono davvero pochi a dotare il proprio sito web di una versione ottimizzata per il mobile, il perchè è estremamente difficile da comprendere.
A noi web designer e web developer tocca realizzare siti nuovi ottimizzati per il mobile, in parole povere, dovremo riscrivere il markup, il css e fare un doppio lavoro per ogni sito web. Un sito per i pc desktop e uno per i dispositivi mobili facendo grande attenzione alle diverse tipologie: smartphone, netbook, tablet (paura vero? 
)
Per nostra fortuna esistono già diverse soluzioni per lo sviluppo mobile, framework di lavoro estremamente validi in grado di fornirci codice già ottimizzato per i diversi dispositivi e per le diverse piattaforme. Voglio segnalarti quelli più importanti, i più conosciuti, utilizzati e apprezzati framework per lo sviluppo mobile:
- JQtouch (abbiamo già parlato di JQtouch qui su EmaWebDesign )
- Sencha Touch
- PhoneGap
- Jo
- Zepto
Ad una prima occhiata si può subito intuire la grande “convenienza” dell’utilizzo di questi strumenti davvero validi anche se ho potuto apprezzare, nella pratica, soltanto jQtouch che ho già utilizzato. Anche gli altri sembrano essere ben fatti ma, quello che più di tutti terrei d’occhio, è l’appena nato jQuery Mobile.
La versione mobile del noto framework JavaScript offre supporto per qualsiasi piattaforma, da iOS ad Android passando per Windows Phone, webOS, MeeGo e Symbian. Mette a disposizione layout ottimizzati, widget/UI, temi e un set completo di feature, API e componenti, tutto quello che serve per sviluppare siti e/o applicazioni cross-platform. Trattandosi di jQuery non possiamo avere alcun dubbio sulla qualità del progetto
Tu hai già iniziato a prevedere lo sviluppo mobile per i siti dei tuoi clienti? Quali strumenti utilizzi?
Invia questo articolo a un amico via email
RightJS: un ottimo framework JavaScript
Di framework JS ne esistono davvero tanti, molti dei quali, estremamente validi (Dojo, MooTools, Prototype, Script.aculo.us, ExtJS). Il più famoso, utilizzato e “amato” dai web developer è sicuramente jQuery, framework, che io stesso utilizzo in tutti i miei progetti. L’aver trovato il framework “ideale” non placa, però, la mia curiosità e la mia voglia di “guardarmi intorno” alla ricerca di alternative e novità.
Ultimamente mi sono “imbattuto” in un ottimo framework JS rilasciato sotto licenza MIT License; si chiama RightJS e lo trovi alla seguente URL: rightjs.org
L’utilizzo è davvero semplice, chi ha già familiarità con la sintassi di jQuery non avrà alcuna difficoltà ad utilizzare immediatamente RightJS. Ecco un esempio di animazione di tipo Fade:
document.onReady(function() { new Fx.Fade('elem').start('out'); new Fx.Fade('elem').start('in'); });
Ed un esempio di innerHTML avviato da un click:
$('button').on('click', function() { $('element').replace('testo inserito tramite rightjs'); });
RightJS supporta la programmazione OOP, Ajax e non manca di una ricca sezione di UI costituita dagli immancabili:
- Autocompleter
- Calendar
- Colorpicker
- Lightbox
- Slider
- Tabs
- Uploader
Anche se non riesci a fare a meno del tuo framework preferito, vale comunque la pena di dargli un’occhiata. Fammi sapere cosa ne pensi
Invia questo articolo a un amico via email
Migliorare le performance di una pagina web con Google Minify
Articolo di Andrea Pernici
Come oramai noto da un bel po’ di tempo è un fattore del posizionamento anche la velocità di caricamento delle pagine web.
Si è discusso molto in merito e questo “Page Speed” è diventato un vero tormentone anche in virtù del fatto che all’interno del Webmaster Tools di google è comparsa una voce sperimentale dedicata proprio alla velocità di caricamento delle pagine del proprio sito con una modalità un po’ oscura e incerta.
Non c’è infatti un modo assoluto per calcolare la reale velocità di un sito e sulla base di quali parametri si possa ottenere il messaggio “il tuo sito è più veloce del 92% dei siti”, ma è sicuramente da tenere presente che la velocità è un fattore SEO a tutti gli effetti ed è anche un fattore determinante quando si parla di usabilità, esperienza utente e conversioni.
La percezione che si può ottenere dallo strumento sperimentale è che questa velocità venga stimata tramite google toolbar o forse Google Chrome o altri servizi google che il navigatore usa e di certo in questo caso il tempo di caricamento può essere influenzato dallo stato della connessione del navigatore e da altri mille fattori che non possono determinare in assoluto la velocità di un sito web.
A parte tutto questo quello che conta è che un sito va ottimizzato al massimo senza troppo pensare ai secondi di caricamento, ma semplicemente tenendo a mente che dobbiamo pensare a noi stessi ed evitare confronti perché confronti non se ne possono fare. Un sito web è un insieme di cose quindi bisogna unire uno ad uno i vari fattori e combinarli insieme per ottenere il massimo relativo al nostro sito e non il massimo assoluto (non possiamo competere con una pagina bianca con solo testo, ma non è detto che quella pagina sia più usabile, più gradevole e con più beneficio emotivo … spero sia chiaro il concetto.
Dopo queste premesse passiamo alla parte un po’ più tecnica del post…vi voglio parlare di uno strumento molto utile per migliorare le vostre pagine senza troppo sforzo e indipendentemente dal fatto che usiate un CMS oppure un sito realizzato da voi.
L’applicazione è “Minify” ( http://code.google.com/p/minify/ ). Minify è un applicazione sviluppata in PHP5 che aiuta nell’adempimento di molte delle regole che permettono di migliorare le performance di una pagina web.
Il suo utilizzo è molto semplice e una volta scaricata l’applicazione basta semplicemente settare secondo le proprie esigienze il file di configurazione e seguire le istruzioni molto dettagliate presenti all’interno del file e all’interno della pagina web dell’applicazione.
In questa immagine potete vedere il contenuto del file .zip che potete scaricare dal sito.
Quello che ci interessa è la cartella min che ha come contenuto i seguenti file e cartelle
Nella stragrande maggioranza dei casi per iniziare ad utilizzare il builder e l’applicazione non è neccessaria alcuna modifica al file config.php, ma se avete qualche problema allora potete mettervi mano e leggere i vari suggerimenti presenti all’interno del file.
Giunti a questo punto non vi resta che uppare la cartella min sul vostro spazio web e visitare la url miosito.ext/min/ e magicamente vi apparirà un semplice strumento con questo aspetto
Grazie a questa banale interfaccia potete combinare i vostri file CSS e JS distintamente specificando le rispettive locazioni e cliccando Update otterrete il codice da inserire nelle vostre pagine in sostituzione dei vostri CSS o JS combinati.
Lo strumento è davvero intuitivo e segnala in modo immediato anche eventuali errori, come ad esempio nell’immagine il percorso dei file che non esistono.
Dopo aver preso dimestichezza con lo strumento diventerà molto più semplice e veloce gestire i file JS e CSS del vostro sito in base alle varie pagine visto che il builder è solo un’applicazione, ma non è assolutamente necessario visto che potete anche utilizzare il file groupsConfig.php per gestire i gruppi di file di cui avete bisogno all’interno di ogni sezione del vostro sito (immgine 4), oppure specificare il codice per le vostre pagine a mano seguendo la seguente regola: /min/f=vostroprimofile.css, vostrosecondofile.css,vostroterzofile.css etc etc.
In concreto vi mostro un esempio pratico della situazione che dovrete fronteggiare.
Pagina originale
<link rel="stylesheet" href="css/stile1.css" type="text/css" /> <link rel="stylesheet" href="css/stile2.css" type="text/css" /> <link rel="stylesheet" href="css/stile3.css" type="text/css" /> <link rel="stylesheet" href="css/stile4.css" type="text/css" /> <script type="text/javascript" src="js/js1.css"></script> <script type="text/javascript" src="js/js2.css"></script> <script type="text/javascript" src="js/js3.css"></script>
Pagina con css e js minificati e combinati al posto di quelli originali
<link type="text/css" rel="stylesheet" href="/min/b=css&f=stile1.css,stile2.css,stile3.css,stile4.css" /> <script type="text/javascript" src="/min/b=js&f=js1.js,js2.js,js3.js"></script>
Pagina con css e js minificati e combinati usando i gruppi
<link type="text/css" rel="stylesheet" href="/min/g=nomeGruppoCss" /> <script type="text/javascript" src="/min/g=nomeGruppoJs"></script>
ipotizzando che nel file groupsConfig.php ci sia:
'nomeGruppoJs' => array('//js/file1.js', '//js/file2.js', '//js/file3.js'), 'nomeGruppoCss' => array('//css/stile1.css', '//css/stile2.css','//css/stile3.css', '//css/stile4.css'),
Quali sono i vantaggi ?
Ora che abbiamo perso questa oretta abbiamo ottenuto molteplici vantaggi:
- Possiamo continuare a tenere distinti vari file CSS e JS senza combinarli a mano e dunque mantenendo l’organizzazione dei nostri file chiara.
- I nostri file vengono minificati e dunque risparmiamo una notevole quantità di banda e riduciamo il peso della pagina.
- I file vengono compressi dall’applicazione quindi salviamo ulteriore banda e secondi.
- Sui file viene settata una scadenza e vengono “cachati” quindi riusciamo a velocizzare le visite successive ( di default nel file config.php abbiamo questo valore $min_serveOptions['maxAge'] = 1800; che ovviamente può essere modificato in base alle vostre preferenze).
- Grazie a questa applicazione riusciamo a guadagnare in un colpo solo moltissimi punti dai tool Google Page Speed e YSlow andando ad adempiere ad un alto numero di regole.
Gli svantaggi o eventuali problemi
Più che svantaggi ci potrebbero essere problemi con alcune combinazioni di file sopratutto Javascript quindi se combinando molti file notate che qualcosa non va più nel vostro sito cercate di identificare il file che una volta combinato va in conflitto con gli altri o risulta corrotto e continuate ad utilizzarlo singolarmente.
Controllate i requisiti richiesti dall’applicazione per funzionare.
Autore dell’articolo: Andrea Pernici lavora come freelance ed è project manager di GT Idea. Laureato in informatica e giocatore di pallamano, puoi seguirlo sul suo blog www.andreapernici.com
Invia questo articolo a un amico via email
CKeditor API: leggere e scrivere il contenuto dell’editor
CKeditor (ex FCKeditor) è sicuramente uno degli editor wysiwyg più conosciuti e utilizzati nei CMS. Il suo utilizzo è davvero semplice:
- si carica l’editor nello spazio web via FTP
- si includono i files necessari nella pagina dove lo si vuole utilizzare
- si crea un’istanza con una sola riga di codice
window.onload = function() {
CKEDITOR.replace( ‘nome istanza’ , {
toolbar : ‘Basic’
});
Una delle cose fondamentali, nell’utilizzo di CKeditor in una web application, è la possibilità di leggere e scrivere il contenuto dell’editor. Per queste e per tante altre opzioni, CKeditor, mette a disposizione delle API javascript molto comode e facili da utilizzare. Vediamo ora come poter leggere e scrivere il contenuto dell’editor grazie ai metodi getData e setData:
Per leggere il contenuto dell’editor
var text = CKEDITOR.instances["nome istanza"].getData();
Per scrivere il contenuto nell’editor
CKEDITOR.instances["nome istanza"].setData(“testo di prova”);
E tu quale editor wysiwyg utilizzi nei tuoi web projects?
Invia questo articolo a un amico via email
Mi trovi anche su: