j'ai créée un petit formulaire d'inscription dans lequel j'ai utilisé des zones de texte et à l'aide du code de cyrano ainsi que les remarques de stealth et jojolapine(que je salue tous particulièrement) j'ai pu introduire des listes déroulantes liées dans ce formulaire,maintenant je voudrais dupliquer ces listes encore une fois dans le même formulaire et pour cela j'ai procédé tout bêtement à copier le code original et à le coller dans mes php et js en modifiant quelques paramètres mais le résultat n'est pas satisfaisant,ci dessus le code de mon formulaire. pouvez vous m'aider svp?
merci en avance.
<!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" />
<title>Liste déroulantes dynamiques liées</title>
<meta name="description" content="Listes dynamiques liées: la seconde liste est modifiée via un objet XHR lors d'une sélection sur la première." />
<meta name="keywords" content="menu,déroulant,select,liées,JavaScript" />
<meta name="author" content="Cyrano" />
<meta name="generator" content="Zend Studio Environnement et WebExpert 5" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<script type="text/javascript" src="./ville_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 idpays AS idp, nompays FROM pays ORDER BY idpays";
$sql1 = "SELECT idpays AS idp1, nompays FROM pays ORDER BY idpays";
// 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);
$recherche1 = mysql_query($sql1, $connexion);
/* Création du tableau PHP des valeurs récupérées */
$pays = array();
$pays1 = array();
/* Index du département par tableau régional */
$id = 0;
while($ligne = mysql_fetch_assoc($recherche))
{
$pays[$ligne['idp']] = $ligne['nompays'];
}
while($ligne1 = mysql_fetch_assoc($recherche1))
{
$pays1[$ligne1['idp1']] = $ligne1['nompays'];
}
?>
</head>
<body style="font-family: verdana, helvetica, sans-serif; font-size: 85%">
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgville">
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 200px;">Nom: *</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_0" name="text_nom" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 200px;">Identifiant: *</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_1" name="text_Id" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_password">
<label class="cf_label" style="width: 200px;">Mot de passe: *</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_2" name="text_mdp" type="password" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_password">
<label class="cf_label" style="width: 200px;">vérification du mot de passe: *</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_3" name="text_vmdp" type="password" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 200px;">Email: *</label>
<input class="cf_inputbox required validate-email" maxlength="150" size="30" title="" id="text_4" name="text_email" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<fieldset style="border: 3px double #333399">
<legend>Sélectionnez votre pays et ville de résidence</legend>
<select name="pays" id="pays" onchange="getvilles(this.value);">
<option value="vide">- - - Choisissez un pays - - -</option>
<?php
/* Construction de la première liste : on se sert du tableau PHP */
foreach($pays as $nr => $nom)
{
?>
<option value="<?php echo($nr); ?>"><?php echo($nom); ?></option>
<?php
}
?>
</select>
<!-- ICI, le secret : on met un bloc avec un id ou va s'insérer le code de
la seconde liste déroulande -->
<span id="blocvilles"></span><br />
</fieldset>
<fieldset style="border: 3px double #333399">
<legend>Sélectionnez votre pays et ville de résidence</legend>
<select name="pays1" id="pays1" onchange="getvilles1(this.value);">
<option value="vide">- - - Choisissez un pays - - -</option>
<?php
/* Construction de la première liste : on se sert du tableau PHP */
foreach($pays1 as $nr => $nom)
{
?>
<option value="<?php echo($nr); ?>"><?php echo($nom); ?></option>
<?php
}
?>
</select>
<!-- ICI, le secret : on met un bloc avec un id ou va s'insérer le code de
la seconde liste déroulande -->
<span id="blocvilles1"></span><br />
</fieldset>
<input type="submit" name="ok" id="ok" value="Envoyer" />
</form>
<?php
}
else
{
/* Si vous arrivez ici, vous avez un gros problème avec la connexion au serveur de base de données */
?>
</head>
<body>
<p>La connexion au serveur de base de données a échoué. Aucun élément ne peut être affiché.</p>
<?php
}
?>
</body>
</html>
Code : Tout sélectionner
/*
* Lister les villes d'un pays avec un objet
* XMLHTTPRequest.
*/
/* Création de la variable globale qui contiendra l'objet XHR */
var requete = null;
var requete1 = 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.');
}
}
function creerRequete1()
{
try
{
/* On tente de créer un objet XmlHTTPRequest */
requete1 = new XMLHttpRequest();
}
catch (microsoft)
{
/* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
try
{
requete1 = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(autremicrosoft)
{
/* La première méthode a échoué, on en teste une seconde */
try
{
requete1 = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(echec)
{
/* À ce stade, aucune méthode ne fonctionne... mettez donc votre navigateur à jour ;) */
requete1 = null;
}
}
}
if(requete1 == 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 actualiservilles()
{
var listeville = requete.responseText;
var blocListe = document.getElementById('blocvilles');
blocListe.innerHTML = listeville;
}
function actualiservilles1()
{
var listeville1 = requete1.responseText;
var blocListe1 = document.getElementById('blocvilles1');
blocListe1.innerHTML = listeville1;
}
/**
* 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 getvilles(idp)
{
/* Si il n'y a pas d'identifiant de région, on fait disparaître la seconde liste au cas où elle serait affichée */
if(idp == 'vide')
{
document.getElementById('blocvilles').innerHTML = '';
}
else
{
/* À cet endroit précis, on peut faire apparaître un message d'attente */
var blocListe = document.getElementById('blocvilles');
blocListe.innerHTML = "Traitement en cours, veuillez patienter...";
/* On crée l'objet XHR */
creerRequete();
/* Définition du fichier de traitement */
var url = 'villes.php?idp='+ idp;
/* 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 */
actualiservilles();
}
}
};
requete.send(null);
}
}
function getvilles1(idp1)
{
/* Si il n'y a pas d'identifiant de région, on fait disparaître la seconde liste au cas où elle serait affichée */
if(idp1 == 'vide')
{
document.getElementById('blocvilles1').innerHTML = '';
}
else
{
/* À cet endroit précis, on peut faire apparaître un message d'attente */
var blocListe1 = document.getElementById('blocvilles1');
blocListe1.innerHTML = "Traitement en cours, veuillez patienter...";
/* On crée l'objet XHR */
creerRequete1();
/* Définition du fichier de traitement */
var url1 = 'villes1.php?idp1='+ idp1;
/* Envoi de la requête à la page de traitement */
requete1.open('GET', url1, true);
/* On surveille le changement d'état de la requête qui va passer successivement de 1 à 4 */
requete1.onreadystatechange = function()
{
/* Lorsque l'état est à 4 */
if(requete1.readyState == 4)
{
/* Si on a un statut à 200 */
if(requete1.status == 200)
{
/* Mise à jour de l'affichage, on appelle la fonction apropriée */
actualiservilles1();
}
}
};
requete1.send(null);
}
}
<?php
/**
* Code qui sera aeeplé par un objet XHR et qui
* retournera la liste déroulante des villes
* correspondant au pays sélectionné.
*/
/* Paramètres de connexion */
$serveur = "localhost";
$admin = "root";
$mdp = "";
$base = "base1";
/* On récupère l'identifiant du pays choisi. */
$idp1 = isset($_GET['idp1']) ? $_GET['idp1'] : false;
/* Si on a un pays, on procède à la requête */
if(false !== $idp1)
{
/* Cération de la requête pour avoir les villes de ce pays */
$sql2 = "SELECT idville, nomville FROM ville WHERE idpays ='" . $idp1 . "' ORDER BY idville ";
$connexion = mysql_connect($serveur, $admin, $mdp);
mysql_select_db($base, $connexion);
$rech_ville = mysql_query($sql2, $connexion) or exit(mysql_error() . "<br/>$sql2");
/* Un petit compteur pour les villes */
$nd1 = 0;
/* On crée deux tableaux pour les id et les noms des villes */
$code_ville = array();
$nom_ville = array();
/* On va mettre les id et noms des villes dans les deux tableaux */
while(false != ($ligne_ville = mysql_fetch_assoc($rech_ville)))
{
$code_ville[] = $ligne_ville['idville'];
$nom_ville[] = $ligne_ville['nomville'];
$nd1++;
}
/* Maintenant on peut construire la liste déroulante */
$liste = "";
$liste .= '<select name="ville" id="ville">'."\n";
for($d = 0; $d < $nd1; $d++)
{
$liste .= ' <option value="'. $nom_ville[$d] .'">'. htmlentities($nom_ville[$d]) .'</option>'."\n";
}
$liste .= '</select>'."\n";
/* Un petit coup de balai */
mysql_free_result($rech_ville);
/* Affichage de la liste déroulante */
echo($liste);
}
/* Sinon on retourne un message d'erreur */
else
{
echo("<p>Une erreur s'est produite. La région sélectionnée comporte une donnée invalide.</p>\n");
}
?>
