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
Ecco perchè non amo i Template Engine
Con questo articolo voglio spiegarti perchè non amo i Template Engine, perchè non li utilizzo e non li utilizzerò. Ma partiamo dall’inizio che sembra la cosa più giusta da fare 
Cos’è un Template Engine e a cosa serve?
Un Template Engine è un insieme di librerie e/o codici che permette di separare il contenuto dalla presentazione in un applicazione web. Il Template Engine più famoso e utilizzato è probabilmente Smarty.
Separare il contenuto (codice, dati ecc.) dalla presentazione (layout, html, css) è sicuramente un approccio da adottare in quanto agevola il lavoro delle diverse figure professionali che collaborano per lo sviluppo di un’applicazione (il web developer e il web designer), che possono lavorare separatamente senza dover dipendere l’uno dall’altro. Come riporta l’articolo di php.html.it linkato all’inizio del post:
“il programmatore si preoccupa solamente di reperire i dati, operarvi le modifiche necessarie e renderli disponibili; il designer si occupa di creare le presentazioni inserendo al posto dei dati effettivi dei marcatori speciali; il template engine fonde i due aspetti: prende i dati forniti dalla parte applicativa, e li inserisce al posto dei marcatori prestabiliti.“
Bene, tutto molto utile. Ma allora perchè non ami i Template Engine?
Per uno motivo molto semplice: li reputo un “layer” inutile, superfluo.
Molti sono soliti associare il concetto di separazione del contenuto dalla presentazione all’adozione di un Template Engine. Ma, in realtà, si può tranquillamente separare il contenuto dalla presentazione facendo benissimamente a meno di un Template Engine. Ecco perchè è inutile. Sicuramente, gli utilizzatori incalliti di Template Engine, mi avranno insultato dopo aver letto queste mie parole… machissenefrega 
Un Template Engine non eguaglia le performance del codice PHP nativo in quanto, il codice del Template Engine, dovrà essere riconvertito in codice nativo al momento dell’esecuzione. Poi, da un punto di vista sintattico, il designer non è che sia particolarmente agevolato, vediamo in questo esempio:
Codice nativo
<ul> <?php foreach ($users as $item) { ?> <li><?php echo $item; ?></li> <?php } ?> </ul>
Codice Template Engine
<ul> {foreach from=$users item=item} <li>{$item}</li> {/foreach} </ul>
Ecco, fornire al designer una funzione/API (o chiamiamola come preferiamo) di questo genere, può essere una soluzione senza dubbio comoda per lui…ed è anche in codice nativo:
<ul> <?php output($users); ?> </ul>
In sostanza, per separare il contenuto dalla presentazione, la differenza la fa la fase di analisi e progettazione…non l’adozione o la non adozione di un Template Engine. Scegliere un buon Framework PHP che adotta il Pattern MVC è un ottimo punto di partenza e, sembra banale ma non lo è, massima collaborazione e intesa tra Developers e Designers sono sufficienti…con la speranza che non vi imbattiate in uno di questi ambigui personaggi 
Invia questo articolo a un amico via email
PHP get URL from HTML: Estrarre i links di una pagina html con l’oggetto DOM di PHP5
Se abbiamo necessità, nella nostra applicazione web, di estrarre tutti i link presenti in una pagina web, una soluzione comoda è quella di utilizzare l’oggetto DOM di PHP5.
Vediamo come realizzare una semplice funzione che, tramite la classe DOMDocument, restituisce gli attributi href e text sottoforma di array multidimensionale:
function getUrlFromHTML($url) { $xml = new DOMDocument(); @$xml->loadHTMLFile($url); $links = array(); foreach($xml->getElementsByTagName('a') as $link) { $links[] = array('url' => $link->getAttribute('href'), 'text' => $link->nodeValue); } return $links; } $arr = getUrlFromHTML("http://www.emawebdesign.com");
Servendoci di un ciclo FOR, ecco come possiamo visualizzare il contenuto dell’array:
for ($i=0;$i<count($arr);$i++) { echo $arr[$i]["url"] ."<br />"; echo $arr[$i]["text"] ."<br />"; }
Semplice e comodo 
Invia questo articolo a un amico via email
Developers, gli Indigeni Digitali stanno organizzando un magnifico evento per voi!
Sei uno sviluppatore? PHP, jQuery e MySQL sono il tuo pane quotidiano?
Programmi per iOS oppure per Android? Allora nessuno è più figo di te!!
Gli Indigeni Digitali stanno organizzando un magnifico evento per te e per chiunque programma e ama scrivere righe su righe di codice, sviluppare app, web app e migliorare la vita delle persone offrendo strumenti semplici e utili.
Facci sapere chi sei, compila il documento che trovi linkato in questo post del blog degli Indigeni Digitali.
Io l’ho già compilato, ora è il tuo turno, ci sarà da divertirsi
Invia questo articolo a un amico via email
Upload sicuro: alcuni accorgimenti per la sicurezza dei form di upload
Quando pensiamo alla sicurezza nelle applicazioni web, pensiamo subito ad una corretta configurazione del php.ini, alla validazione dei dati inseriti in input in un form, alla prevenzione dell’SQL Injection ecc.
Un aspetto a cui si deve prestare sempre grande attenzione è quello della sicurezza dei form di upload file. Ormai, in quasi tutti i tipi di applicazione, è richiesto almeno un form di upload:
- per caricare l’avatar dell’utente
- per allegare un file ad un post da pubblicare in bacheca
- per hostare un file o per trasmetterlo ad un contatto
I form di upload sono necessari e bisogna tenerli sicuri per evitare spiacevoli sorprese. Di seguito ti elenco alcuni punti che devi tenere sempre in considerazione per la sicurezza dei tuoi form di upload:
01) Controllare il tipo di file
Devi sempre controllare il tipo di file uploadato, sia lato client che server. Se, il tuo, è un form di upload per un avatar utente è ovvio che i tipi di file accettati saranno soltanto immagini GIF, PNG o JPG. Impedisci l’upload di qualsiasi altro tipo di file.
02) Specificare la cartella di destinazione
Il file deve essere uploadato in una cartella temporanea diversa dalla root del tuo sito, cartella, alla quale non si può accedere direttamente. Si eseguono i controlli opportuni sul file, dopodichè, lo si sposta nella cartella “definitiva” che contiene i files uploadati.
03) Il nome del file deve essere casuale
Il file uploadato deve essere rinominato in modo casuale utilizzando, magari, qualche algoritmo di crittografia. Il risultato deve essere che, il nome del file, non deve più essere noto a chi ha uploadato il file. Per la parte client, è opportuno caricare il percorso del file dinamicamente da un DB.
Nella cartella dove si uploadano i files, si può inserire un file htaccess per impedire l’esecuzione di file PHP (o altro tipo di file). Il codice da inserire nell’htaccess è il seguente:
<files *.php>
order deny,allow
deny from all
</files>
Tu hai altri consigli da aggiungere per rendere i form di upload più sicuri?
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
Quali caratteristiche deve avere un CMS per essere di successo?
Spesso, nelle community di Web Developers e Web Designers, si discute su quale sia il miglior CMS da utilizzare per realizzare i propri lavori. Si discute su quale sia il:
- più performante
- più modificabile
- più personalizzabile
- più seo-friendly
- più in grado di fare il caffè ecc.
C’è chi preferisce Joomla, chi Drupal o chi WordPress…io preferisco quest’ultimo e lo confesso spudoratamente
Senza fossilizzarci su quale sia il migliore tra i tre, senza dubbio, sono i CMS Open Source più utilizzati e di maggior successo al mondo. La domanda che ora mi pongo (e al quale cercherò di dare una risposta in perfetto stile Marzullo) è la seguente:
Quali caratteristiche deve avere un CMS per ottenere il gradimento dei professionisti, Developers o Designers che siano?
Dando per scontato che il CMS deve essere Open Source e scritto in PHP (sono uno sviluppatore LAMP, dovevo specificarlo e sottolinearlo ), vediamo cosa deve offrire a chi intende servirsene:
01) Pattern architetturale
Il cms deve basarsi su un pattern architetturale (come l’MVC) che prevede componenti software distinti e separati ma che “interagiscono” per il funzionamento dell’applicazione. In caso di modifiche “importanti”, magari per progetti altamente personalizzati, è molto importante scegliere un CMS basato su un’architettura conosciuta o, comunque, facile da comprendere.
02) Core e API
Il funzionamento del cms deve avvenire tramite un core ben progettato e, soprattutto, ben scritto che si componga di un set di API/Oggetti/Functions completo (database, FTP, Cache ecc.) e ben documentato.
03) Sistema di templating
Che si avvalga di un template engine tipo Smarty o di un sistema a “viste” come quello di WordPress (che usa il Loop con i “template tags”), il cms, deve mettere a disposizione dei Designers un sistema di templating che permetta una facile e veloce integrazione di layout realizzati in HTML/CSS.
03) Sistema di Plugins
Un cms sopra ogni cosa deve essere “modulare“; le sue funzionalità devono essere assolutamente “estendibili” tramite un sistema di “plugins” che permetta una facile e veloce installazione di moduli “extra” (i plugins, moduli o componenti, come preferisci chiamarli) per qualsiasi esigenza.
04) La SEO è tutto
Un cms deve essere di “default” ottimizzato per i motori di ricerca. L’aspetto SEO è di primaria importanza. Puoi realizzare il miglior sito del mondo ma, se non sei ben posizionato sui motori di ricerca, il tuo bel sito lo vedi solo tu e tua nonna…e, poi, voglio vedere come spieghi a tua nonna che sei un valido web designer e che, il sito, l’hai realizzato con WordPress
05) User-Experience del backend
A parte il lato tecnico c’è, comunque, da considerare la gestione dei contenuti e delle funzionalità del cms. Per questo, il pannello amministrativo, deve essere ben strutturato, usabile, che offra una buona user-experience.
Tu cosa ne pensi? Quali caratteristiche deve avere un CMS per essere di successo? Condividi la tua idea con un commento
Invia questo articolo a un amico via email
PHP pathinfo: ottenere informazioni su un file
Molto spesso, in un’applicazione web, abbiamo la necessità di implementare un filemanager o, comunque, di visualizzare le informazioni su uno o più file ospitati sul server.
PHP ci mette a disposizione la funzione pathinfo con cui possiamo facilmente ricavare per ogni file:
- nome della directory dove risiede il file
- nome del file completo di estensione
- estensione del file
A partire dalla versione 5.2.0 di PHP è possibile anche ricavare il nome del file senza l’estensione.
Ecco un esempio di utilizzo:
<?php $file = pathinfo('file.jpg'); echo "dirname: " .$file['dirname'], "<br />"; echo "basename: " .$file['basename'], "<br />"; echo "extension: " .$file['extension'], "<br />"; echo "filename: " .$file['filename'], "<br />"; ?>
Invia questo articolo a un amico via email
PHP: stabilire convenzioni per la stesura del codice
Per ogni progetto web, prima di procedere alla stesura del codice, si stabiliscono delle convenzioni per mantenere il codice pulito e uniforme a tutto vantaggio della leggibilità. Nelle aziende, queste convenzioni, permettono a tutto il personale (i web developers ovviamente) di leggere e comprendere velocemente il codice (magari scritto da altri) e, tutto sommato, anche se si è scritto il codice in prima persona, grazie alle convenzioni, sarà più agevole e immediato rileggere e comprendere il codice.
Inoltre, scrivere codice pulito e ben formattato, è sintomo anche di grande professionalità; non dimentichiamo che, sempre e comunque, l’occhio vuole la sua parte
A questo proposito, voglio condividere con te le convenzioni che adotto per i miei progetti, vediamo quali sono:
01) Tag di apertura e chiusura PHP
Per i tag di apertura e chiusura utilizzo <?php ?> anzichè <? ?>
02) Commento per descrivere le parti del codice
Ogni parte del codice viene commentata con una descrizione chiara di quello che viene eseguito.
03) Utilizzo dei tag brevi
Utilizzo dove possibile i “tag brevi” come per i cicli iterativi, IF o anche per gli echo:
esempio di echo <?=$variabile?>
esempio di if
<?php if ($username == ‘emawebdesign’): ?>
<?=$variabile1?>
<?php else: ?>
<?=$variabile2?>
<?php endif; ?>
esempio di for
<?php for($i=0;$i<10;$i++): ?>
<?=$i?>
<?php endfor; ?>
04) Accesso ai metodi di una classe con i due punti
Per accedere ai metodi di una classe utilizzo i due punti invece della freccia:
$somma = new somma();
$num = $somma::params(3,2);
invece di
$somma = new somma();
$num = $somma->params(3,2);
05) Costanti in maiuscolo
Dichiaro le costanti in maiuscolo, in questo modo, saltano subito all’occhio durante la lettura del codice e sono facilmente individuabili:
define(’COSTANTE’, ‘contenuto’);
06) Nei nomi di variabili, le parole, separate con una maiuscola
Nei nomi delle variabili, le parole, le separo con una lettera maiuscola. Un esempio chiarirà tutto:
$nomeVariabileSottoConvenzione = 1;
A molti piace separare con un underscore
$nome_variabile_sotto_convenzione = 1;
Questa convenzione vale anche per i nomi delle funzioni.
07) Righe di commento per separare sezioni importanti nel codice
Se nel codice ci sono parti dello stesso particolarmente importanti le “isolo”, con delle righe di commento, dal resto del codice:
#####################################
PARTE DEL CODICE DI PARTICOLARE IMPORTANZA
#####################################
Anche tu ami scrivere codice pulito, ben formattato e leggibile? Condividi anche tu le convenzioni che utilizzi con un commento
Invia questo articolo a un amico via email
Mi trovi anche su: