[AJAX] Listes déroulantes imbriquées

**saille** · 14/02/2013, 14h43

Bonjour,

J'ai 2 listes imbriquées Départements et Insee Villes.

Quand on sélectionne un département, les villes se chargent. Jusqu'ici ça fonctionne bien.

Aussi incroyable que l'on pourrait le croire, avec IE je récupère bien le "value" de mon code insee mais avec Firefox je n'ai pas de valeur, mon bouton de validation est bloqué et en plus un code erreur :

Erreur : TypeError: document.form01.CouInsee is undefined

Voici le code en javascript:

Code javascript :

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
// GESTION DES LISTES IMBRIQUEES SUR 2 NIVEAUX
    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 remplissage du département adresse courrier
    */
    function ChargeCouInsee(){
    var xhr = getXhr();
    xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
    di = document.getElementById('CouInsee');
    di.innerHTML = xhr.responseText;
    }
    }
    xhr.open("POST","TableInsee.php",true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    CodeDepartement = document.getElementById('CouDep').options[document.getElementById('CouDep').selectedIndex].value;
    CodeListe = "CouInsee";
    xhr.send("CodeDepartement="+CodeDepartement+"&CodeListe="+CodeListe);

TableInsee.php fonctionne correctement dans les 2 cas car la liste des villes est correctement alimentée.

Voici dans mon formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <tr>
    <td colspan="4"><strong>D&eacute;partement</strong><span class="Etoile" id="E_CouDep"> *</span>
    <!-- Ici la liste des départements -->
    <select name='CouDep' class="liste" id='CouDep' onchange='ChargeCouInsee()'>
    <option></option>
    </select>
    <strong>Code postal/Ville </strong><span class="Etoile" id="E_CouInsee">*</span>
    <!-- Ici la liste des insee et libellés des villes -->
    <div id='CouInsee' style='display:inline'>
    <select name='CouInsee' class="liste" id="CouInsee">
    <option value=""> </option>
    </select></div>
    </td>
    </tr>