11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Voici une partie du formulaire ou il y a les deux listes déroulantes.

http://img695.imageshack.us/img695/466/img1de.jpg

Le contenu de la deuxième liste "Ville" se charge selon le choix dans la première liste "Pays".

J'ai suivi ce tutoriel: http://siddh.developpez.com/articles/ajax/#LIV-A

Sa fonctionne parfaitement mais j'ai eu un problème quand j'ai voulu récupérer le contenu du formulaire.

J'arrive pas a récupérer la valeur du champ "ville", c'est la deuxième liste déroulante.

Quand j'ai afficher le code source sous Chrome, j'obtiens une liste vide au niveau du code source alors qu'on affichant la page le contenu s'affiche parfaitement sur la liste des villes !

http://img199.imageshack.us/img199/8335/img2xp.jpg

Je crois que c'est normal puisque le code qui permet d'afficher la liste des villes se trouve sur une page à part qui est "ajaxVille.php" Smiley rolleyes

Alors y a t'il une méthode plus simple que je peux l'implémenter ?
Ou dois-je intervenir pour afficher et récupérer la valeur du <select> des villes ?

Merci d'avance
Modifié par riadh.rezig (11 Aug 2010 - 11:32)
salut...

Comme tu le dis si bien en effet ta liste est vide au niveau du code source puisque c'est un ajax qui la remplit...

par contre j'ai regardé le lien et lors de l'insertion dans le select les objet contiennent bien un id...

Il n'y a donc aucune raison que tu ne récupère pas l'id sélectionné...

as tu essayé de debugger en faisant sur ta page de récupération un echo de ce que tu as dans $_POST ??
Salut,

oui j'ai effectuer plusieurs tests..

Voici par exemple:

http://img821.imageshack.us/img821/5422/test1o.jpg

Et en cliquant sur "Ajouter" j'obtiens :

http://img196.imageshack.us/img196/7946/test2dk.jpg

Comme vous voyez, j'obtiens que l'ID du pays, alors que j'ai besoins aussi de l'ID de la ville sélectionnée !

Voici le script permettant de récupérer les différents valeurs:




include ("connexion.php");

$username = $_POST["username"];
$password = md5($_POST["password"]);
$id_pays = $_POST["pays"];
$id_ville = $_POST["ville"];
$etat = $_POST["etat"];

echo "Username: ".$username."<br />";
echo "Password: ".$password."<br />";
echo "Pays: ".$id_pays."<br />";
echo "Ville: ".$id_ville."<br />";
echo "Etat: ".$etat."<br />";

MMM ... oui ok je vois bien...

as tu essayé quand même de faire un

print_r($_POST);


afin de voir si par hasard ton champs ville ne serait pas un peu différent que prévu...
re Smiley cligne

ok je vais soumettre une idée non vérifiée et absolument sans garantie... masi je dirai que ton select ville sort du flux du FORM...

peut être à cause de ton div... essayes sans le div pour voir..

si ça marche essayes d'avoir des noms différents div id=Ville select name= Sville par exemple

garde le print_r du POST pour savoir à quel moment ça fonctionne bien.. ensuite tu pourra faire propre lol
jo_link_noir a écrit :
Salut,

C'est pas plutôt le select de pays qui n'est pas fermé ?



Salut,

non j'ai vérifié, le select de pays est fermé sauf qu'il n'apparait pas dans l'image.
Modifié par riadh.rezig (09 Aug 2010 - 18:54)
pchlj a écrit :
re Smiley cligne

ok je vais soumettre une idée non vérifiée et absolument sans garantie... masi je dirai que ton select ville sort du flux du FORM...

peut être à cause de ton div... essayes sans le div pour voir..

si ça marche essayes d'avoir des noms différents div id=Ville select name= Sville par exemple

garde le print_r du POST pour savoir à quel moment ça fonctionne bien.. ensuite tu pourra faire propre lol


re Smiley smile

J'ai fais le test.

Toujours y a pas de Ville !

Je vais chercher un autre exemple et l'adapter selon mes besoins.
Bonjour Smiley biggrin

vous pouvez m aider riadh.rezig

je suis en train de créer un site contenant un formulaire ressemble au votre

liste déroulante des payes et une liste déroulante liée des villes

et puisque vous avez résolu le pb; est ce que je peux avoir la solution?
merci d'avance Smiley cligne
Bonjour,

Structure de la table `region`

CREATE TABLE `region` (
  `id_region`   tinyint(4)   NOT NULL   auto_increment,
  `region`      varchar(50)   NOT NULL   default '',
  PRIMARY KEY  (`id_region`)
);


Structure de la table `departement`

CREATE TABLE `departement` (
  `id_departement`   char(2)   NOT NULL   default '',
  `departement`      varchar(50)   NOT NULL   default '',
  `id_region`      tinyint(4)   NOT NULL   default '0',
  PRIMARY KEY  (`id_departement`),
  KEY `id_region` (`id_region`)
);


Contenu de la table `region`

INSERT INTO `region` VALUES (1, 'Alsace');
INSERT INTO `region` VALUES (2, 'Aquitaine');
INSERT INTO `region` VALUES (3, 'Auvergne');
INSERT INTO `region` VALUES (4, 'Basse-Normandie');
INSERT INTO `region` VALUES (5, 'Bourgogne');
INSERT INTO `region` VALUES (6, 'Bretagne');
INSERT INTO `region` VALUES (7, 'Centre');
INSERT INTO `region` VALUES (8, 'Champagne');
INSERT INTO `region` VALUES (9, 'Corse');
INSERT INTO `region` VALUES (10, 'Franche-Comté');
INSERT INTO `region` VALUES (11, 'Haute-Normandie');
INSERT INTO `region` VALUES (12, 'Île-de-France');
INSERT INTO `region` VALUES (13, 'Languedoc-Roussillon');
INSERT INTO `region` VALUES (14, 'Limousin');
INSERT INTO `region` VALUES (15, 'Lorraine');
INSERT INTO `region` VALUES (16, 'Midi-Pyrénées');
INSERT INTO `region` VALUES (17, 'Nord-pas-de-Calais');
INSERT INTO `region` VALUES (18, 'Pays de la Loire');
INSERT INTO `region` VALUES (19, 'Picardie');
INSERT INTO `region` VALUES (20, 'Poitou-Charentes');
INSERT INTO `region` VALUES (21, 'Provence-Alpes-Côte-d\'Azur');
INSERT INTO `region` VALUES (22, 'Rhône-Alpes');


Contenu de la table `departement`

INSERT INTO `departement` VALUES ('01', 'Ain', 22);
INSERT INTO `departement` VALUES ('02', 'Aisne', 19);
INSERT INTO `departement` VALUES ('03', 'Allier', 3);
INSERT INTO `departement` VALUES ('04', 'Alpes-de-Haute-Provence', 21);
INSERT INTO `departement` VALUES ('05', 'Hautes-Alpes', 21);
INSERT INTO `departement` VALUES ('06', 'Alpes-Maritimes', 21);
INSERT INTO `departement` VALUES ('07', 'Ardèche', 22);
INSERT INTO `departement` VALUES ('08', 'Ardennes', 8);
INSERT INTO `departement` VALUES ('09', 'Ariège', 16);
INSERT INTO `departement` VALUES ('10', 'Aube', 8);
INSERT INTO `departement` VALUES ('11', 'Aude', 13);
INSERT INTO `departement` VALUES ('12', 'Aveyron', 16);
INSERT INTO `departement` VALUES ('13', 'Bouches-du-Rhône', 21);
INSERT INTO `departement` VALUES ('14', 'Calvados', 4);
INSERT INTO `departement` VALUES ('15', 'Cantal', 3);
INSERT INTO `departement` VALUES ('16', 'Charente', 20);
INSERT INTO `departement` VALUES ('17', 'Charente-Maritime', 20);
INSERT INTO `departement` VALUES ('18', 'Cher', 7);
INSERT INTO `departement` VALUES ('19', 'Corrèze', 14);
INSERT INTO `departement` VALUES ('2A', 'Corse-du-Sud', 9);
INSERT INTO `departement` VALUES ('2B', 'Haute-Corse', 9);
INSERT INTO `departement` VALUES ('21', 'Côte-d\'Or', 5);
INSERT INTO `departement` VALUES ('22', 'Côtes-d\'Armor', 6);
INSERT INTO `departement` VALUES ('23', 'Creuse', 14);
INSERT INTO `departement` VALUES ('24', 'Dordogne', 2);
INSERT INTO `departement` VALUES ('25', 'Doubs', 10);
INSERT INTO `departement` VALUES ('26', 'Drôme', 22);
INSERT INTO `departement` VALUES ('27', 'Eure', 11);
INSERT INTO `departement` VALUES ('28', 'Eure-et-Loir', 7);
INSERT INTO `departement` VALUES ('29', 'Finistère', 6);
INSERT INTO `departement` VALUES ('30', 'Gard', 13);
INSERT INTO `departement` VALUES ('31', 'Haute-Garonne', 16);
INSERT INTO `departement` VALUES ('32', 'Gers', 16);
INSERT INTO `departement` VALUES ('33', 'Gironde', 2);
INSERT INTO `departement` VALUES ('34', 'Hérault', 13);
INSERT INTO `departement` VALUES ('35', 'Ille-et-Vilaine', 6);
INSERT INTO `departement` VALUES ('36', 'Indre', 7);
INSERT INTO `departement` VALUES ('37', 'Indre-et-Loire', 7);
INSERT INTO `departement` VALUES ('38', 'Isère', 22);
INSERT INTO `departement` VALUES ('39', 'Jura', 10);
INSERT INTO `departement` VALUES ('40', 'Landes', 2);
INSERT INTO `departement` VALUES ('41', 'Loir-et-Cher', 7);
INSERT INTO `departement` VALUES ('42', 'Loire', 22);
INSERT INTO `departement` VALUES ('43', 'Haute-Loire', 3);
INSERT INTO `departement` VALUES ('44', 'Loire-Atlantique', 18);
INSERT INTO `departement` VALUES ('45', 'Loiret', 7);
INSERT INTO `departement` VALUES ('46', 'Lot', 16);
INSERT INTO `departement` VALUES ('47', 'Lot-et-Garonne', 2);
INSERT INTO `departement` VALUES ('48', 'Lozère', 13);
INSERT INTO `departement` VALUES ('49', 'Maine-et-Loire', 18);
INSERT INTO `departement` VALUES ('50', 'Manche', 4);
INSERT INTO `departement` VALUES ('51', 'Marne', 8);
INSERT INTO `departement` VALUES ('52', 'Haute-Marne', 8);
INSERT INTO `departement` VALUES ('53', 'Mayenne', 18);
INSERT INTO `departement` VALUES ('54', 'Meurthe-et-Moselle', 15);
INSERT INTO `departement` VALUES ('55', 'Meuse', 15);
INSERT INTO `departement` VALUES ('56', 'Morbihan', 6);
INSERT INTO `departement` VALUES ('57', 'Moselle', 15);
INSERT INTO `departement` VALUES ('58', 'Nièvre', 5);
INSERT INTO `departement` VALUES ('59', 'Nord', 17);
INSERT INTO `departement` VALUES ('60', 'Oise', 19);
INSERT INTO `departement` VALUES ('61', 'Orne', 4);
INSERT INTO `departement` VALUES ('62', 'Pas-de-Calais', 17);
INSERT INTO `departement` VALUES ('63', 'Puy-de-Dôme', 3);
INSERT INTO `departement` VALUES ('64', 'Pyrénées-Atlantiques', 2);
INSERT INTO `departement` VALUES ('65', 'Hautes-Pyrénées', 16);
INSERT INTO `departement` VALUES ('66', 'Pyrénées-Orientales', 13);
INSERT INTO `departement` VALUES ('67', 'Bas-Rhin', 1);
INSERT INTO `departement` VALUES ('68', 'Haut-Rhin', 1);
INSERT INTO `departement` VALUES ('69', 'Rhône', 22);
INSERT INTO `departement` VALUES ('70', 'Haute-Saône', 10);
INSERT INTO `departement` VALUES ('71', 'Saône-et-Loire', 5);
INSERT INTO `departement` VALUES ('72', 'Sarthe', 18);
INSERT INTO `departement` VALUES ('73', 'Savoie', 22);
INSERT INTO `departement` VALUES ('74', 'Haute-Savoie', 22);
INSERT INTO `departement` VALUES ('75', 'Paris', 12);
INSERT INTO `departement` VALUES ('76', 'Seine-Maritime', 11);
INSERT INTO `departement` VALUES ('77', 'Seine-et-Marne', 12);
INSERT INTO `departement` VALUES ('78', 'Yvelines', 12);
INSERT INTO `departement` VALUES ('79', 'Deux-Sèvres', 20);
INSERT INTO `departement` VALUES ('80', 'Somme', 19);
INSERT INTO `departement` VALUES ('81', 'Tarn', 16);
INSERT INTO `departement` VALUES ('82', 'Tarn-et-Garonne', 16);
INSERT INTO `departement` VALUES ('83', 'Var', 21);
INSERT INTO `departement` VALUES ('84', 'Vaucluse', 21);
INSERT INTO `departement` VALUES ('85', 'Vendée', 18);
INSERT INTO `departement` VALUES ('86', 'Vienne', 20);
INSERT INTO `departement` VALUES ('87', 'Haute-Vienne', 14);
INSERT INTO `departement` VALUES ('88', 'Vosges', 15);
INSERT INTO `departement` VALUES ('89', 'Yonne', 5);
INSERT INTO `departement` VALUES ('90', 'Territoire de Belfort', 10);
INSERT INTO `departement` VALUES ('91', 'Essonne', 12);
INSERT INTO `departement` VALUES ('92', 'Hauts-de-Seine', 12);
INSERT INTO `departement` VALUES ('93', 'Seine-Saint-Denis', 12);
INSERT INTO `departement` VALUES ('94', 'Val-de-Marne', 12);
INSERT INTO `departement` VALUES ('95', 'Val-d\'Oise', 12);



PAGE index.php

<?php
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
/* Variables de connexion : ajustez ces paramètres selon votre propre environnement */
$serveur = "localhost";
$admin   = "root";
$mdp     = "";
$base    = "liste";
/* On récupère si elle existe la valeur de la région envoyée par le formulaire */
$idr = isset($_POST['region'])?$_POST['region']:null;
?>
<!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>Sélectionner un département selon la région choisie</title>
<meta name="description" content="Listes déroulantes dynamiques inter-dépendantes" />
<meta name="keywords" content="" />
<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" />
</head>
<body style="font-family: verdana, helvetica, sans-serif; font-size: 85%">

<?php
if(isset($_POST['ok']) && isset($_POST['departement']) && $_POST['departement'] != "")
{
    $region_selectionnee = $_POST['region'];
    $dept_selectionne = $_POST['departement'];
?>
<p>Vous avez sélectionné ID_VILLE = <?php echo($dept_selectionne); ?> ID_PAYS = <?php echo($region_selectionnee); ?></p>
<?php
}
?>

<?php
/* On établit la connexion à MySQL avec mysql_pconnect() plutôt qu'avec mysql_connect()
*  car on aura besoin de la connexion un peu plus loin dans le script */
$connexion = mysql_pconnect($serveur, $admin, $mdp);
if($connexion != false)
{
    $choixbase = mysql_select_db($base, $connexion);
    $sql1 = "SELECT `id`, `name`".
    " FROM `pays`".
    " ORDER BY `name`";
    $rech_regions = mysql_query($sql1);
    $code_region = array();
    $region = array();
    /* On active un compteur pour les régions */
    $nb_regions = 0;
    if($rech_regions != false)
    {
        while($ligne = mysql_fetch_assoc($rech_regions))
        {
            array_push($code_region, $ligne['id']);
            array_push($region, $ligne['name']);
            /* On incrémente de compteur */
            $nb_regions++;
        }
    }
    ?>
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgdept">

<select name="region" id="region" onchange="document.forms['chgdept'].submit();">
  <option value="-1">Choisissez une pays</option>
    <?php
    for($i = 0; $i < $nb_regions; $i++)
    {
?>
  <option value="<?php echo($code_region[$i]); ?>"<?php echo((isset($idr) && $idr == $code_region[$i])?" selected=\"selected\"":null); ?>><?php echo($region[$i]); ?></option>
<?php
    }
    ?>
</select>
    <?php
    mysql_free_result($rech_regions);
    /* On commence par vérifier si on a envoyé un numéro de région et le cas échéant s'il est différent de -1 */
    if(isset($idr) && $idr != -1)
    {
        /* Cération de la requête pour avoir les départements de cette région */
        $sql2 = "SELECT `id`, `name`".
        " FROM `ville`".
        " WHERE `id_pays` = ". $idr ."".
        " ORDER BY `id_pays`;";
        if($connexion != false)
        {
            $rech_dept = mysql_query($sql2, $connexion);
            /* Un petit compteur pour les départements */
            $nd = 0;
            /* On crée deux tableaux pour les numéros et les noms des départements */
            $code_dept = array();
            $nom_dept = array();
            /* On va mettre les numéros et noms des départements dans les deux tableaux */
            while($ligne_dept = mysql_fetch_assoc($rech_dept))
            {
                array_push($code_dept, $ligne_dept['id']);
                array_push($nom_dept, $ligne_dept['name']);
                $nd++;
            }
            /* Maintenant on peut construire la liste déroulante */
            ?>
<select name="departement" id="departement">
            <?php  
            for($d = 0; $d<$nd; $d++)
            {
                ?>
  <option value="<?php echo($code_dept[$d]); ?>"<?php echo((isset($dept_selectionne) && $dept_selectionne == $code_dept[$d])?" selected=\"selected\"":null); ?>><?php echo($nom_dept[$d]." (". $code_dept[$d] .")"); ?></option>
                <?php
            }
?>
</select>
<?php
        }
        /* Un petit coup de balai */
        mysql_free_result($rech_dept);
    }
?>
<br /><input type="submit" name="ok" id="ok" value="Envoyer" />

</form>
<?php
    /* Terminé, on ferme la connexion */
    mysql_close($connexion);
}
else
{
    /* Si on arrive là, c'est pas bon signe, il faut vérifier les 
    * paramètres de connexion, mot de passe, serveur pas démarré etc... */
?>
<p>Un incident s'est produit lors de la connexion à la base de données, veuiillez essayer à nouveau ultérieurement.</p>
<?php
}
?>

</body>
</html>


Voila, est n'oubliez pas de modifier les paramètres de connexion $admin, $mdp et $base.
Hello riadh.rezig,

je n'ai pas regardé le code dans le détail mais 2 petites choses ont attiré mon attention :

* la déclaration XML <?xml version="1.0" encoding="iso-8859-1"?> placée avant le DOCTYPE est non seulement inutile mais va faire basculer certains navigateurs en mode Quirks (cf. cette astuce).

* soumettre automatiquement le formulaire sur l'évènement onchange du premier SELECT est considéré comme une mauvaise pratique.
Heyoan a écrit :
Hello riadh.rezig,

je n'ai pas regardé le code dans le détail mais 2 petites choses ont attiré mon attention :

* la déclaration XML <?xml version="1.0" encoding="iso-8859-1"?> placée avant le DOCTYPE est non seulement inutile mais va faire basculer certains navigateurs en mode Quirks (cf. cette astuce).

* soumettre automatiquement le formulaire sur l'évènement onchange du premier SELECT est considéré comme une mauvaise pratique.


Bonjour,

merci beaucoup Heyoan pour ces informations, je ferais attention dorénavant. Smiley ravi