Ciao a tutti,
in giro sulla rete ho trovato un bellissimo script che mi permette di avere 2 gruppi di Select dinamiche gestite con Ajax e Php.
Un gruppo da tre:
- Regioni
- Province
- Comuni
ed un gruppo da due
- Categorie professionali
- Ruolo Professionale
Ovviamente tutto legato da tabelle in un Db Mysql.
Il problema e che nei campi mi stampa il valore dell'ID e non il valore della selezione.
Ad esempio: invece di Lazio - Roma - Agosta mi viene segnato nei campi 5 - 8 - 15
Vi posto il codice cosi forse sarò più chiaro:
FORM:
<select name="regione_domicilio" id="regione_domicilio" onchange="loadList('provincia_domicilio', getSelected(this));clearList('comune_domicilio')" style="width:500px" class="input">
<option value="0">--- Selezionare Regione di Domicilio ---</option>
</select></div></td></tr>
<tr valign="baseline" bgcolor="efefef">
<td align="right"><div align="right" class="Stile11">Provincia Domicilio:</div></td>
<td bgcolor="efefef"><div align="left">
<select name="provincia_domicilio" id="provincia_domicilio" onChange="loadList('comune_domicilio', getSelected(this))" style="width:500px" class="input">
<option value="0">--- Selezionare Provincia di Domicilio ---</option>
</select></div></td></tr>
<tr valign="baseline" bgcolor="efefef">
<td align="right"><div align="right" class="Stile11">Comune Domicilio:</div></td>
<td bgcolor="efefef"><div align="left">
<select name="comune_domicilio" id="comune_domicilio" style="width:500px" class="input">
<option value="0">--- Selezionare Comune di Domicilio ---</option>
</select>
<select name="categorie_professionali" id="categorie_professionali" onChange="loadList('ruolo_professionale', getSelected(this))" style="width:500px" class="input"><option value="0">--- Selezionare Categoria Professionale ---</option>
</select></div></td></tr>
<tr>
<td align="right" valign="middle" bgcolor="efefef"><div align="right" class="Stile15"><span class="Stile47 Stile74 Stile82"><span class="Stile74">Ruolo professionale:</span></span></div></td><td align="left" valign="middle" bgcolor="efefef"><div align="left">
<select name="ruolo_professionale" id="ruolo_professionale" style="width:500px" class="input"><option value="0">--- Selezionare Ruolo Professionale ---</option>
</select>
</html>
<script type="text/javascript">
//<![CDATA[
loadList('categorie_professionali', 0);
loadList('regione_domicilio', 0);
var queueWatcher = setInterval(checkQueue, 200);
//]]>
</script>
REQUEST.PHP
<?php
require 'dbconfig.php';
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die;
mysql_select_db(DB_NAME) or die;
//I valori in input vanno verificati
//id deve essere un valore numerico
$pid = (int)$_REQUEST['id'];
//maschera eventuali caratteri speciali in table
$tb = mysql_real_escape_string($_REQUEST['table'], $conn);
switch($tb) {
case 'categorie_professionali':
$sql="SELECT id, categoria_professionale FROM `$tb` ORDER BY categoria_professionale";
break;
case 'ruolo_professionale':
$sql="SELECT id, categoria_professionale FROM `$tb` WHERE id_categorie_professionali=$pid ORDER BY categoria_professionale";
break;
case 'regione_domicilio':
$sql="SELECT id, regione_domicilio FROM `$tb` ORDER BY regione_domicilio";
break;
case 'provincia_domicilio':
$sql="SELECT id, provincia_domicilio FROM `$tb` WHERE id_regione_domicilio=$pid ORDER BY provincia_domicilio";
break;
case 'comune_domicilio':
$sql="SELECT id, comune_domicilio FROM `$tb` WHERE id_provincia_domicilio=$pid ORDER BY comune_domicilio";
break;
}
//Il primo elemento della risposta è il nome della tabella (= attributo ID del tag select)
$out="$tb;";
if($result = mysql_query($sql, $conn)) {
while ($row = mysql_fetch_row($result)) {
$out .= $row[0] . '|' . $row[1] . ';';
}
}
//Rimuove il carattere ; in coda
echo rtrim($out, ';');
?>
LISTS.JS
var xmlHttp = getXmlHttpObject();
var busy = false;
var requests = new Array();
function checkQueue() {
if(!busy && requests.length > 0) {
sendRequest(requests.shift());
}
}
function sendRequest(req) {
busy = true;
xmlHttp.open('GET', req, true);
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(null);
}
function loadList(tb, id){
requests.push('request.php?table='+tb+'&id='+id);
}
function clearList(listId) {
var select = document.getElementById(listId);
//Elimina i tag options tranne il primo (--- Selezionare xxx ---)
while (select.options.length > 1) {
select.remove(1);
}
}
function addOption(select, value, text) {
//Aggiunge un elemento <option> ad una lista <select>
var option = document.createElement("option");
option.value = value,
option.text = text;
try {
select.add(option, null);
} catch(e) {
//Per Internet Explorer
select.add(option);
}
}
function getSelected(select) {
//Ritorna il valore dell'elemento <option> selezionato in una lista
return select.options[select.selectedIndex].value;
}
function stateChanged() {
if(xmlHttp.readyState == 4) {
busy = false;
//Stato OK
if (xmlHttp.status == 200) {
var resp = xmlHttp.responseText;
if(resp) {
//Le coppie di valori nella striga di risposta sono separate da ;
var values = resp.split(';');
//Il primo elemento è l'ID della lista.
var listId = values.shift();
var select = document.getElementById(listId);
clearList(listId);
var limit = values.length;
for(i=0; i < limit; i++) {
var pair = values.split('|');
//aggiunge un elemento <option>
addOption(select, pair[0], pair[1]);
}
}
}
}
}
function getXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
Vi prego di aiutarmi, sono certo che è una sciocchezza, ma sono giorni che ci sbatto il cranio!!
Grazie
in giro sulla rete ho trovato un bellissimo script che mi permette di avere 2 gruppi di Select dinamiche gestite con Ajax e Php.
Un gruppo da tre:
- Regioni
- Province
- Comuni
ed un gruppo da due
- Categorie professionali
- Ruolo Professionale
Ovviamente tutto legato da tabelle in un Db Mysql.
Il problema e che nei campi mi stampa il valore dell'ID e non il valore della selezione.
Ad esempio: invece di Lazio - Roma - Agosta mi viene segnato nei campi 5 - 8 - 15
Vi posto il codice cosi forse sarò più chiaro:
FORM:
<select name="regione_domicilio" id="regione_domicilio" onchange="loadList('provincia_domicilio', getSelected(this));clearList('comune_domicilio')" style="width:500px" class="input">
<option value="0">--- Selezionare Regione di Domicilio ---</option>
</select></div></td></tr>
<tr valign="baseline" bgcolor="efefef">
<td align="right"><div align="right" class="Stile11">Provincia Domicilio:</div></td>
<td bgcolor="efefef"><div align="left">
<select name="provincia_domicilio" id="provincia_domicilio" onChange="loadList('comune_domicilio', getSelected(this))" style="width:500px" class="input">
<option value="0">--- Selezionare Provincia di Domicilio ---</option>
</select></div></td></tr>
<tr valign="baseline" bgcolor="efefef">
<td align="right"><div align="right" class="Stile11">Comune Domicilio:</div></td>
<td bgcolor="efefef"><div align="left">
<select name="comune_domicilio" id="comune_domicilio" style="width:500px" class="input">
<option value="0">--- Selezionare Comune di Domicilio ---</option>
</select>
<select name="categorie_professionali" id="categorie_professionali" onChange="loadList('ruolo_professionale', getSelected(this))" style="width:500px" class="input"><option value="0">--- Selezionare Categoria Professionale ---</option>
</select></div></td></tr>
<tr>
<td align="right" valign="middle" bgcolor="efefef"><div align="right" class="Stile15"><span class="Stile47 Stile74 Stile82"><span class="Stile74">Ruolo professionale:</span></span></div></td><td align="left" valign="middle" bgcolor="efefef"><div align="left">
<select name="ruolo_professionale" id="ruolo_professionale" style="width:500px" class="input"><option value="0">--- Selezionare Ruolo Professionale ---</option>
</select>
</html>
<script type="text/javascript">
//<![CDATA[
loadList('categorie_professionali', 0);
loadList('regione_domicilio', 0);
var queueWatcher = setInterval(checkQueue, 200);
//]]>
</script>
REQUEST.PHP
<?php
require 'dbconfig.php';
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die;
mysql_select_db(DB_NAME) or die;
//I valori in input vanno verificati
//id deve essere un valore numerico
$pid = (int)$_REQUEST['id'];
//maschera eventuali caratteri speciali in table
$tb = mysql_real_escape_string($_REQUEST['table'], $conn);
switch($tb) {
case 'categorie_professionali':
$sql="SELECT id, categoria_professionale FROM `$tb` ORDER BY categoria_professionale";
break;
case 'ruolo_professionale':
$sql="SELECT id, categoria_professionale FROM `$tb` WHERE id_categorie_professionali=$pid ORDER BY categoria_professionale";
break;
case 'regione_domicilio':
$sql="SELECT id, regione_domicilio FROM `$tb` ORDER BY regione_domicilio";
break;
case 'provincia_domicilio':
$sql="SELECT id, provincia_domicilio FROM `$tb` WHERE id_regione_domicilio=$pid ORDER BY provincia_domicilio";
break;
case 'comune_domicilio':
$sql="SELECT id, comune_domicilio FROM `$tb` WHERE id_provincia_domicilio=$pid ORDER BY comune_domicilio";
break;
}
//Il primo elemento della risposta è il nome della tabella (= attributo ID del tag select)
$out="$tb;";
if($result = mysql_query($sql, $conn)) {
while ($row = mysql_fetch_row($result)) {
$out .= $row[0] . '|' . $row[1] . ';';
}
}
//Rimuove il carattere ; in coda
echo rtrim($out, ';');
?>
LISTS.JS
var xmlHttp = getXmlHttpObject();
var busy = false;
var requests = new Array();
function checkQueue() {
if(!busy && requests.length > 0) {
sendRequest(requests.shift());
}
}
function sendRequest(req) {
busy = true;
xmlHttp.open('GET', req, true);
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(null);
}
function loadList(tb, id){
requests.push('request.php?table='+tb+'&id='+id);
}
function clearList(listId) {
var select = document.getElementById(listId);
//Elimina i tag options tranne il primo (--- Selezionare xxx ---)
while (select.options.length > 1) {
select.remove(1);
}
}
function addOption(select, value, text) {
//Aggiunge un elemento <option> ad una lista <select>
var option = document.createElement("option");
option.value = value,
option.text = text;
try {
select.add(option, null);
} catch(e) {
//Per Internet Explorer
select.add(option);
}
}
function getSelected(select) {
//Ritorna il valore dell'elemento <option> selezionato in una lista
return select.options[select.selectedIndex].value;
}
function stateChanged() {
if(xmlHttp.readyState == 4) {
busy = false;
//Stato OK
if (xmlHttp.status == 200) {
var resp = xmlHttp.responseText;
if(resp) {
//Le coppie di valori nella striga di risposta sono separate da ;
var values = resp.split(';');
//Il primo elemento è l'ID della lista.
var listId = values.shift();
var select = document.getElementById(listId);
clearList(listId);
var limit = values.length;
for(i=0; i < limit; i++) {
var pair = values.split('|');
//aggiunge un elemento <option>
addOption(select, pair[0], pair[1]);
}
}
}
}
}
function getXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
Vi prego di aiutarmi, sono certo che è una sciocchezza, ma sono giorni che ci sbatto il cranio!!
Grazie
