Ho due combobox, e voglio popolare la seconda in base alla selezione della prima, con dati provenienti da DB.
Per fare questo mi sono affidato ad Ajax.
Lo script creato funziona......infatti la seconda combo si popola in base alla scelta della prima, l'unico problema č che quando vado a vedere il sorgente, nella seconda combo non risulta proprio niente... č vuota!!!.
Quindi quando invio il form e cerco di prendere i dati della combo ricevo solo quelli relativi alla prima!!!
Ecco il codice:
Codice PHP:
<?php include("Connessione/connessione.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test AJAX</title>
<script language="javascript" type="text/javascript">
function newXMLHttpRequest(){
var xmlreq = false;
//Controllo il tipo di oggetto XMLHttpRequest da utilizzare
if(window.XMLHttpRequest){
//Per browser non Microsoft
xmlreq = new XMLHttpRequest();
}else if(window.ActiveXObject){
//Cerco di creare l'oggetto via MS ActiveX
try{
//Nuove versioni per browser IE
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e1){ //Errore riscontrato durante la creazione dell'oggetto
try{
//Precedenti versioni per browser IE
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e2){ //Nuovo errore durante la creazione dell'oggetto
xmlreq = false;
}
}
}
//Restituisco l'eventuale oggetto XMLHttpRequest
return xmlreq;
}
function populateSubSelection(){
//Recupero i dati da inviare
var mainSelection = document.getElementById("mainSelection");
//Creo un nuovo oggetto XMLHTTPRequest
var req = newXMLHttpRequest();
//Invio la richiesta
req.open("POST", "data.php", true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Invio i dati POST
req.send("choice=" + mainSelection.options[mainSelection.selectedIndex].value);
//Gestore dell'evoluzione dello stato dell'oggetto req
req.onreadystatechange = handleResponse(req, updateSubSelection);
}
/*
* Ritorna una funzione per la gestione dello stato dell'oggetto req.
* Ed infine a stato finale raggiunto, invia la risposta XML alla funzione che dovra' gestire il tutto.
* reg = Istanza XMLHTTPRequest
* XMLHandler = nome della funzione a cui passare il risultato XML da gestire
*/
function handleResponse(req, XMLHandler){
return function(){
//Controllo se l'oggetto req ha raggiunto lo stato finale
if(req.readyState == 4){
//Inoltre accertiamoci di aver ottenuto il messaggio 200 dal server,
if (req.status == 200){
//A questo punto richiamo la funzione che gestira' il risultato XML
XMLHandler(req.responseXML);
}else{
alert("Errore HTTP: " + req.status);
}
}
}
}
/*
* Popolo la seconda SELECT
* XMLResult = Il risultato XML prodotto da handleResponse
*/
function updateSubSelection(XMLResult){
//Gestisco il documento XML ricevuto e popolo la seconda SELECT
var categoria = XMLResult.getElementsByTagName('categoria');
//Recupero la seconda SELECT
var subSelection = document.getElementById("subSelection");
//Svuoto la secondo SELECT
for (var i = subSelection.length - 1; i >= 0; i--)
subSelection.remove(i);
//Scorro gli elementi
for (var i = 0; i < categoria.length; i++){
//Recupero i vari elementi singoli
var item = categoria[i];
//Creo il nuovo elemento OPTION da aggiungere nella seconda SELECT
var NewOpt = document.createElement('option');
NewOpt.value = item.getAttribute("value");
NewOpt.text = item.firstChild.nodeValue;
//Popolo la seconda SELECT
try{
subSelection.add(NewOpt, null); //Metodo Standard, non funziona con IE
}catch(e){
subSelection.add(NewOpt); // Funziona solo con IE
}
}
}
</script>
</head>
<body>
Seleziona la Categoria:
<?php
$strsql = "select * from Regione order by Regione";
$query = mysql_query($strsql);
?>
<form action="prova1.php" method="post">
<select name="Regione" id="mainSelection" onchange="populateSubSelection()">
<option value="">---</option>
<?php while($row=mysql_fetch_array($query)){?>
<option value="<?php echo $row["Id_regione"];?>"><?php echo $row["Regione"];?></option>
<?php }?>
</select>
Seconda SELECT:
<select name="Provincia" id="subSelection">
<option value="">---</option>
</select>
<label>
<input type="submit" name="Submit" value="Invia" />
</label>
</form>
</body>
</html>
Questa č la pagina esterna dove vengono recuperati i dati della seconda combo:
Codice PHP:
<?php include("Connessione/connessione.php");?>
<?php include("funzioni/NormDatiDB.php");?>
<?php
//Imposto un header XML
header("Content-type: application/xml");
header("Cache-control: no-cache, must-revalidate");
echo "<?xml version=\"1.0\"?>\n";
echo "<categorie>\n";
//Recupero la variabile sulla quale effettuare i vari controlli
$myChoice = @$_POST['choice'];
$sql="select * from Provincia where Id_regione=".NormDatiDB($myChoice,"INT");
$query = mysql_query($sql);
$row=mysql_fetch_array($query);
$i==0;
while($i<6){
echo "\t<categoria value=\"".$i."\">".$row['Provincia']."</categoria>\n";
$i++;
}
echo "</categorie>\n";
?>
Ma dove sbaglio???