merci beaucoup
<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
index.php
<?php
$serveur = "localhost";
$admin = "root";
$mdp = "";
$base = "geographie";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mod_xhr.js" charset="iso_8859-1"></script>
<script type="text/javascript" src="typ_xhr.js" charset="iso_8859-1"></script>
<?php
/* Requête SQL de récupération des données de la première liste */
$sql = "SELECT `id_region` AS idm, `region` ".
"FROM `region` ".
"ORDER BY `id_region`;";
/* Connexion et exécution de la requête */
$connexion = mysql_connect($serveur, $admin, $mdp);
if($connexion != false)
{
$choixbase = mysql_select_db($base, $connexion);
$recherche = mysql_query($sql, $connexion);
/* Création du tableau PHP des valeurs récupérées */
$marques = array();
/* Index du modèle par tableau de marque */
$id = 0;
while($ligne = mysql_fetch_assoc($recherche))
{
$marques[$ligne['idm']] = $ligne['region'];
}
?>
</head>
<body>
<div id="globalselect"><br />
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgmod">
<br />
1. <select name="marque" id="marque" style="width:420px; background-color:#E3E3E3; border:solid 1px; border-color:#CCCCCC;" onchange="getModeles(this.value);">
<option value="vide">- - - - - - - - - - - - - - - - - Choisissez une marque - - - - - - - - - - - - - - - - - -</option>
<?php
/* Construction de la première liste : on se sert du tableau PHP */
foreach($marques as $nm => $nom)
{
?>
<option value="<?php echo($nm); ?>"><?php echo($nom); ?></option>
<?php
}
?>
</select>
<br />
<br /> <!-- ICI, le secret : on met un bloc avec un id ou va s'insérer le code de
la seconde liste déroulande -->
2. <span id="blocModeles"><select name="modele" disabled id="modele" style="width:420px; background-color:#E3E3E3; border:solid 1px; border-color:#CCCCCC;" onchange="getTypes(this.value);">
<option value="vide">- - - - - - - - - - - - - - - - - Choisissez un modèle - - - - - - - - - - - - - - - - - - -</option>
</select></span><br />
<br />
3. <span id="blocTypes"><select name="type" disabled id="type" style="width:420px; background-color:#E3E3E3; border:solid 1px; border-color:#CCCCCC;" onchange="getProduits(this.value);">
<option value="vide">- - - - - - - - - - - - - - - - - Choisissez un type - - - - - - - - - - - - - - - - - - - - - -</option>
</select></span>
<br /><br />
<br /> <center><input type="submit" name="ok" id="ok" value="Envoyer" /></center>
</form>
</div>
<?php
}
else
{
/* Si vous arrivez ici, vous avez un gros problème avec la connexion au serveur de base de données */
?>
<p>La connexion au serveur de base de données a échoué. Aucun élément ne peut être affiché.</p>
<?php
}
?>
</body>
</html><?php
print_r($_GET);
/**
* Code qui sera appelé par un objet XHR et qui
* retournera la liste déroulante des modèles
* correspondant à la marque sélectionnée.
*/
/* Paramètres de connexion */
$serveur = "localhost";
$admin = "root";
$mdp = "";
$base = "geographie";
/* On récupère l'identifiant de la marque choisie. */
$idm = isset($_GET['idm']) ? $_GET['idm'] : false;
/* Si on a une marque, on procède à la requête */
if(false !== $idm)
{
/* Création de la requête pour avoir les modèles de cette marque */
$sql2 = "SELECT `id_departement` AS idmd, `nom_departement`".
" FROM `departement`".
" WHERE `id_region` = ". $idm ."".
" ORDER BY `id_departement` ASC;";
$connexion = mysql_connect($serveur, $admin, $mdp);
mysql_select_db($base, $connexion);
$query = mysql_query($sql2, $connexion);
/* Un petit compteur pour les modèles */
$initial = 0;
/* On crée deux tableaux pour les numéros et les noms des modèles */
$modeles = array();
/* On va mettre les numéros et noms des modèles dans les deux tableaux */
/*
while(false != ($row = mysql_fetch_assoc($query)))
{
//$modeles[$ligne['idm']] = $ligne['region'];
//$modeles[] = $row['id_departement'];
$modeles[] = $row['nom_departement'];
$initial++;
}
*/
while($ligne = mysql_fetch_assoc($query))
{
$modeles[$ligne['idmd']] = $ligne['nom_departement'];
}
?>
<select name="marque" id="marque" style="width:420px; background-color:#E3E3E3; border:solid 1px; border-color:#CCCCCC;" onchange="getTypes(this.value);">
<option value="vide">- - - - - - - - - - - - - - - - - Choisissez une type - - - - - - - - - - - - - - - - - -</option>
<?php
/* Construction de la première liste : on se sert du tableau PHP */
foreach($modeles as $initial => $nom_modeles)
{
?>
<option value="<?php echo($initial); ?>"><?php echo($nom_modeles); ?></option>
<?php
}
?>
</select>
<?php
}
/* Sinon on retourne un message d'erreur */
else
{
echo("<p>Une erreur s'est produite. Le modele selectionne comporte une donnee invalide.</p>\n");
}
?><?php
print_r($_GET);
/**
* Code qui sera appelé par un objet XHR et qui
* retournera la liste déroulante des modèles
* correspondant à la type sélectionnée.
*/
/* Paramètres de connexion */
$serveur = "localhost";
$admin = "root";
$mdp = "";
$base = "geographie";
/* On récupère l'identifiant de la type choisie. */
$idmd = isset($_GET['idmd']) ? $_GET['idmd'] : false;
/* Si on a une type, on procède à la requête */
if(false !== $idmd)
{
/* Création de la requête pour avoir les modèles de cette type */
$sql3 = "SELECT `id_ville` as idv, `nom_ville` FROM `ville`WHERE `id_departement` = '. $idmd .'";
$connexion = mysql_connect($serveur, $admin, $mdp);
mysql_select_db($base, $connexion);
$query = mysql_query($sql3, $connexion);
/* Un petit compteur pour les modèles */
$initial = 0;
/* On crée deux tableaux pour les numéros et les noms des modèles */
$types = array();
/* On va mettre les numéros et noms des modèles dans les deux tableaux */
/*
while(false != ($row = mysql_fetch_assoc($query)))
{
//$types[$ligne['idmd']] = $ligne['region'];
//$types[] = $row['id_departement'];
$types[] = $row['nom_departement'];
$initial++;
}
*/
while($ligne = mysql_fetch_assoc($query))
{
$types[$ligne['idv']] = $ligne['nom_ville'];
}
?>
<select name="type" id="type" style="width:420px; background-color:#E3E3E3; border:solid 1px; border-color:#CCCCCC;">
<option value="vide">- - - - - - - - - - - - - - - - - Choisissez une type - - - - - - - - - - - - - - - - - -</option>
<?php
/* Construction de la première liste : on se sert du tableau PHP */
foreach($types as $initial => $nom_types)
{
?>
<option value="<?php echo($initial); ?>"><?php echo($nom_types); ?></option>
<?php
}
?>
</select>
<?php
}
/* Sinon on retourne un message d'erreur */
else
{
echo("<p>Une erreur s'est produite. Le modele selectionne comporte une donnee invalide.</p>\n");
}
ob_end_flush();
?>/**
* Lister les modèles d'une marque avec un objet
* XMLHTTPRequest.
*/
/* Création de la variable globale qui contiendra l'objet XHR */
var requete = null;
/**
* Fonction privée qui va créer un objet XHR.
* Cette fonction initialisera la valeur dans la variable globale définie
* ci-dessus.
*/
function creerRequete()
{
try
{
/* On tente de créer un objet XmlHTTPRequest */
requete = new XMLHttpRequest();
}
catch (microsoft)
{
/* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
try
{
requete = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(autremicrosoft)
{
/* La première méthode a échoué, on en teste une seconde */
try
{
requete = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(echec)
{
/* À ce stade, aucune méthode ne fonctionne... mettez donc votre navigateur à jour ;) */
requete = null;
}
}
}
if(requete == null)
{
alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
}
}
/**
* Fonction privée qui va mettre à jour l'affichage de la page.
*/
function actualiserModeles()
{
var listeMod = requete.responseText;
var blocListe = document.getElementById('blocModeles');
blocListe.innerHTML = listeMod;
}
/**
* Fonction publique appelée par la page affichée.
* Cette fonction va initialiser la création de l'objet XHR puis appeler
* le code serveur afin de récupérer les données à modifier dans la page.
*/
function getModeles(idm)
{
/* Si il n'y a pas d'identifiant de marque, on fait disparaître la seconde liste au cas où elle serait affichée */
if(idm == 'vide')
{
document.getElementById('blocModeles').innerHTML = '';
}
else
{
/* À cet endroit précis, on peut faire apparaître un message d'attente */
var blocListe = document.getElementById('blocModeles');
blocListe.innerHTML = "Traitement en cours, veuillez patienter...";
/* On crée l'objet XHR */
creerRequete();
/* Définition du fichier de traitement */
var url = 'modeles.php?idm='+ idm;
/* Envoi de la requête à la page de traitement */
requete.open('GET', url, true);
/* On surveille le changement d'état de la requête qui va passer successivement de 1 à 4 */
requete.onreadystatechange = function()
{
/* Lorsque l'état est à 4 */
if(requete.readyState == 4)
{
/* Si on a un statut à 200 */
if(requete.status == 200)
{
/* Mise à jour de l'affichage, on appelle la fonction apropriée */
actualiserModeles();
}
}
};
requete.send(null);
}
}//**
* Lister les modèles d'une marque avec un objet
* XMLHTTPRequest.
*/
/* Création de la variable globale qui contiendra l'objet XHR */
var requete = null;
/**
* Fonction privée qui va créer un objet XHR.
* Cette fonction initialisera la valeur dans la variable globale définie
* ci-dessus.
*/
function creerRequete()
{
try
{
/* On tente de créer un objet XmlHTTPRequest */
requete = new XMLHttpRequest();
}
catch (microsoft)
{
/* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
try
{
requete = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(autremicrosoft)
{
/* La première méthode a échoué, on en teste une seconde */
try
{
requete = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(echec)
{
/* À ce stade, aucune méthode ne fonctionne... mettez donc votre navigateur à jour ;) */
requete = null;
}
}
}
if(requete == null)
{
alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
}
}
/**
* Fonction privée qui va mettre à jour l'affichage de la page.
*/
function actualiserTypes()
{
var listeTyp = requete.responseText;
var blocListe = document.getElementById('blocTypes');
blocListe.innerHTML = listeTyp;
}
/**
* Fonction publique appelée par la page affichée.
* Cette fonction va initialiser la création de l'objet XHR puis appeler
* le code serveur afin de récupérer les données à modifier dans la page.
*/
function getTypes(idmd)
{
/* Si il n'y a pas d'identifiant de modele, on fait disparaître la seconde liste au cas où elle serait affichée */
if(idmd == 'vide')
{
document.getElementById('blocTypes').innerHTML = '';
}
else
{
/* À cet endroit précis, on peut faire apparaître un message d'attente */
var blocListe = document.getElementById('blocTypes');
blocListe.innerHTML = "Traitement en cours, veuillez patienter...";
/* On crée l'objet XHR */
creerRequete();
/* Définition du fichier de traitement */
var url = 'types.php?idmd='+ idmd;
/* Envoi de la requête à la page de traitement */
requete.open('GET', url, true);
/* On surveille le changement d'état de la requête qui va passer successivement de 1 à 4 */
requete.onreadystatechange = function()
{
/* Lorsque l'état est à 4 */
if(requete.readyState == 4)
{
/* Si on a un statut à 200 */
if(requete.status == 200)
{
/* Mise à jour de l'affichage, on appelle la fonction apropriée */
actualiserTypes();
}
}
};
requete.send(null);
}
}
