IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[AJAX] Multi Liste Déroulante


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2008
    Messages : 5
    Points : 6
    Points
    6
    Par défaut [AJAX] Multi Liste Déroulante
    Bonjour tout le monde,

    Voila mon probléme est assez simple, j'ai 4 liste déroulante toute réunie entre elle.

    1 Liste Pays
    1 Liste Département
    1 Liste code Postal
    1 Liste Ville

    Donc le membre choisie le pays dans la liste déroulante 1 se qui met a jour la liste des département la numero 2 qui va a son tour mettre a jour la numero 3 celle des code postaux qui elle meme va mettre a jour celle des villes.

    Hors seul les deux premieres marche correctement les autre ne bouge pas voicie mon code.

    fonction.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    <!-- Code Formulaire LiveFiche -->
    <script type='text/javascript'>
     
    function getXhr(){
    var xhr = null; 
    if(window.XMLHttpRequest) // Firefox et autres
    xhr = new XMLHttpRequest(); 
    else if(window.ActiveXObject){ // Internet Explorer 
    try {
    xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
    else { // XMLHttpRequest non supporté par le navigateur 
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    xhr = false; 
    } 
    return xhr;
    }
     
    /**
    * Méthode qui sera appelée sur le click du bouton
    */
    function go(){
    var xhr = getXhr();
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function(){
    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr.readyState == 4 && xhr.status == 200){
    leselect = xhr.responseText;
    // On se sert de innerHTML pour rajouter les options a la liste
    document.getElementById('departement').innerHTML = leselect;
    }
    }
     
    // Ici on va voir comment faire du post
    xhr.open("POST","verif.php?verif=departement",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    // ici, l'id de l'auteur
    sel = document.getElementById('pays');
    idpays = sel.options[sel.selectedIndex].value;
    xhr.send("idPays="+idpays);
    }
    function cp(){
    var xhr = getXhr();
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function(){
    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr.readyState == 4 && xhr.status == 200){
    leselect = xhr.responseText;
    // On se sert de innerHTML pour rajouter les options a la liste
    document.getElementById('code_postal').innerHTML = leselect;
    }
    }
     
    // Ici on va voir comment faire du post
    xhr.open("POST","verif.php?verif=code_postal",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    // ici, l'id de l'auteur
    sel = document.getElementById('departement');
    iddepartement = sel.options[sel.selectedIndex].value;
    xhr.send("idDepartement="+iddepartement);
    }
    function vl(){
    var xhr = getXhr();
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function(){
    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr.readyState == 4 && xhr.status == 200){
    leselect = xhr.responseText;
    // On se sert de innerHTML pour rajouter les options a la liste
    document.getElementById('ville').innerHTML = leselect;
    }
    }
     
    // Ici on va voir comment faire du post
    xhr.open("POST","verif.php?verif=ville",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    // ici, l'id de l'auteur
    sel = document.getElementById('code_postal');
    idcode_postal = sel.options[sel.selectedIndex].value;
    xhr.send("idCode_postal="+idcode_postal);
    }
    </script>
    verif.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    <?php
    include("../scripts/config.php");
     
    if ( $_GET['verif']=="departement" ){
    echo "<select name='departement'>";
    if(isset($_POST["idPays"])){
    if ( $_POST["idPays"]=="FRANCE" ){
    echo "<option value='01'>(01) Ain</option>
    <option value='02'>(02) Aisne</option>
    <option value='03'>(03) Allier</option>
    <option value='04'>(04) Alpes-de-Haute-Provence</option>
    <option value='05'>(05) Hautes-Alpes</option>
    <option value='06'>(06) Alpes-Maritimes</option>
    <option value='07'>(07) Ardèche</option>
    <option value='08'>(0 Ardennes</option>
    <option value='09'>(09) Ariège</option>
    <option value='10'>(10) Aube</option>
    <option value='11'>(11) Aude</option>
    <option value='12'>(12) Aveyron</option>
    <option value='13'>(13) Bouches-du-Rhône</option>
    <option value='14'>(14) Calvados</option>
    <option value='15'>(15) Cantal</option>
    <option value='16'>(16) Charente</option>
    <option value='17'>(17) Charente-Maritime</option>
    <option value='18'>(1 Cher</option>
    <option value='19'>(19) Corrèze</option>
    <option value='20'>(20) Corse</option>
    <option value='21'>(21) Côte-d'Or</option>
    <option value='22'>(22) Côtes-d'Armor</option>
    <option value='23'>(23) Creuse</option>
    <option value='24'>(24) Dordogne</option>
    <option value='25'>(25) Doubs</option>
    <option value='26'>(26) Drôme</option>
    <option value='27'>(27) Eure</option>
    <option value='28'>(2 Eure-et-Loire</option>
    <option value='29'>(29) Finistère</option>
    <option value='30'>(30) Gard</option>
    <option value='31'>(31) Haute-Garonne</option>
    <option value='32'>(32) Gers</option>
    <option value='33'>(33) Gironde</option>
    <option value='34'>(34) Hérault</option>
    <option value='35'>(35) Ille-et-Vilaine</option>
    <option value='36'>(36) Indre</option>
    <option value='37'>(37) Indre-et-Loire</option>
    <option value='38'>(3 Isère</option>
    <option value='39'>(39) Jura</option>
    <option value='40'>(40) Landes</option>
    <option value='41'>(41) Loir-et-Cher</option>
    <option value='42'>(42) Loire</option>
    <option value='43'>(43) Haute-Loire</option>
    <option value='44'>(44) Loire-Atlantique</option>
    <option value='45'>(45) Loiret</option>
    <option value='46'>(46) Lot</option>
    <option value='47'>(47) Lot-et-Garonne</option>
    <option value='48'>(4 Lozère</option>
    <option value='49'>(49) Maine-et-Loire</option>
    <option value='50'>(50) Manche</option>
    <option value='51'>(51) Marne</option>
    <option value='52'>(52) Haute-Marne</option>
    <option value='53'>(53) Mayenne</option>
    <option value='54'>(54) Meurthe-et-Moselle</option>
    <option value='55'>(55) Meuse</option>
    <option value='56'>(56) Morbihan</option>
    <option value='57'>(57) Moselle</option>
    <option value='58'>(5 Nièvre</option>
    <option value='59'>(59) Nord</option>
    <option value='60'>(60) Oise</option>
    <option value='61'>(61) Orne</option>
    <option value='62'>(62) Pas-de-Calais</option>
    <option value='63'>(63) Puy-de-Dôme</option>
    <option value='64'>(64) Pyrénées-Atlantiques</option>
    <option value='65'>(65) Hautes-Pyrénées</option>
    <option value='66'>(66) Pyrénées-Orientales</option>
    <option value='67'>(67) Bas-Rhin</option>
    <option value='68'>(6 Haut-Rhin</option>
    <option value='69'>(69) Rhône</option>
    <option value='70'>(70) Haute-Saône</option>
    <option value='71'>(71) Saône-et-Loire</option>
    <option value='72'>(72) Sarthe</option>
    <option value='73'>(73) Savoie</option>
    <option value='74'>(74) Haute-Savoie</option>
    <option value='75'>(75) Paris</option>
    <option value='76'>(76) Seine-Maritime</option>
    <option value='77'>(77) Seine-et-Marne</option>
    <option value='78'>(7 Yvelines</option>
    <option value='79'>(79) Deux-Sèvres</option>
    <option value='80'>(80) Somme</option>
    <option value='81'>(81) Tarn</option>
    <option value='82'>(82) Tarn-et-Garonne</option>
    <option value='83'>(83) Var</option>
    <option value='84'>(84) Vaucluse</option>
    <option value='85'>(85) Vendée</option>
    <option value='86'>(86) Vienne</option>
    <option value='87'>(87) Haute-Vienne</option>
    <option value='88'>(8 Vosges</option>
    <option value='89'>(89) Yonne</option>
    <option value='90'>(90) Territoire de Belfort</option>
    <option value='91'>(91) Essonne</option>
    <option value='92'>(92) Hauts-de-Seine</option>
    <option value='93'>(93) Seine-Saint-Denis</option>
    <option value='94'>(94) Val-de-Marne</option>
    <option value='95'>(95) Val-d'Oise</option>
    <option value='97'>(97) D.O.M</option>
    <option value='98'>(9 T.O.M</option>";
    } elseif ( $_POST["idPays"]=="BELGIQUE" ){
    echo "<option value='001'>Brabant</option>
    <option value='002'>Anvers/Antwerpen</option>
    <option value='003'>Limbourg/Limburg</option>
    <option value='004'>Liège/Luik</option>
    <option value='005'>Namur/Namen</option>
    <option value='006'>Luxembourg/Luxemburg</option>
    <option value='007'>Hainaut/Henegouwen</option>
    <option value='008'>Flandre-Occidentale/West-Vlaanderen</option>
    <option value='009'>Flandre-Orientale/Oost-Vlaanderen</option>";
    }
    }
    echo "</select>";
    }
     
    if ( $_GET['verif']=="code_postal" ){
    echo "<select name='code_postal'>";
    if(isset($_POST["idDepartement"])){
    $res = mysql_query("SELECT * FROM code_postal WHERE dept='".$_POST["idDepartement"]."'");
    while($row = mysql_fetch_assoc($res)){
    echo "<option value='".$row["CP"]."'>".$row["CP"]."</option>";
    }
    }
    echo "</select>";
    }
     
    if ( $_GET['verif']=="ville" ){
    echo "<select name='ville'>";
    if(isset($_POST["idCode_postal"])){
    $res = mysql_query("SELECT * FROM code_postal WHERE CP='".$_POST["idCode_postal"]."'");
    while($row = mysql_fetch_assoc($res)){
    echo "<option value='".$row["Ville"]."'>".$row["Ville"]."</option>";
    }
    }
    echo "</select>";
    }
    ?>
    formulaire.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <tr>
    <td>Votre Pays :</td>
    <td><select class="checkit" name='pays' id='pays' onchange='go()'>
    <option value='-1'>Choisisez un Pays</option>
    <option value="FRANCE">France</option>
    <option value="BELGIQUE">Belgique</option></select></td>
    </tr>
    <tr>
    <td>Votre Département :</td>
    <td><div id="departement"><select name='departement' id='departement' onchange='cp()'>
    <option value='-1'>Choisir un Département</option></select></div></td>
    </tr>
    <tr>
    <td>Votre Code Postal :</td>
    <td><div id="code_postal"><select name='code_postal' id='code_postal' onchange='vl()'>
    <option value='-1'>Choisir un Code Postal</option></select></div></td>
    </tr>
    <tr>
    <td>Votre Ville :</td>
    <td><div id="ville"><select name='ville' id='ville'>
    <option value='-1'>Choisir une Ville</option></select></div></td>
    </tr>
    Voila merci d'avance pour votre aide.

  2. #2
    Membre actif Avatar de Ikonic
    Inscrit en
    Février 2007
    Messages
    197
    Détails du profil
    Informations forums :
    Inscription : Février 2007
    Messages : 197
    Points : 202
    Points
    202
    Par défaut
    Salut,

    Premièrement, tu as un gros souci d'id : si tu veux rester conforme à W3C Xhtml, il est précisé qu'un identifiant doit être unique (contrairement, aux classes).
    Donc je remarque déjà que tu identifies ton conteneur et ta liste déroulante respective par le même id...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="departement"><select name='departement' id='departement'
    Idem pour le reste... donc c'est déjà à corriger.
    Et ça devrait résoudre ton souci...

    [hs] Lit ceci , et utilise un framework, ça te permettra d'avoir un code propre .
    piksite.com
    Pour vos photos, images, .... » Carousel.us

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] Liaisons Liste Déroulante + Input Text
    Par JmL40 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 17/09/2007, 13h17
  2. [AJAX] 3 listes déroulantes ajax
    Par neoboy dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 31/08/2007, 15h38
  3. [AJAX] ASP liste déroulantes pays departement ville
    Par franfr57 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 06/04/2007, 08h18
  4. [AJAX] Plusieurs listes déroulantes
    Par max-mag dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 19/01/2007, 14h40
  5. [AJAX] Listes déroulantes
    Par gscorpio dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 04/12/2006, 09h15

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo