[AJAX] Plusieurs listes déroulantes

Bonjour,

J'ai le problème suivant sur Firefox, mais pas sous IE.
J'ai réalisé une liste déroulante qui se complète selon ce tuto : http://siddh.developpez.com/articles/ajax/

Tout marche nikel sur FF et IE.

J'ai voulu rajouter une 3ème liste déroulante :
On choisit la première qui induit le contenu de la seconde, puis on choisi la
seconde qui induit la troisième.
J'ai dupliqué les fonctions tout fonctionne sur IE mais sur Firefox la troisième liste ne se complète pas :cry:

J'ai l'erreur suivante :
document.formu.annee has no properties
Sur cette ligne :
MM_annee = document.formu.annee.options[document.formu.annee.selectedIndex].value;
formu est le nom de mon formulaire, et annee le nom du champ.

Quelle est l'erreur sur Firefox ?
Merci de votre aide.

Salut,

As tu trouvé une solution à ton problème car j'ai exactement le même soucis actuellement...

Ben j'ai avancé un peu, essaye ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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('champb').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				idm = document.formu.champa.options[document.formu.champa.selectedIndex].value;
				//alert(idmarque);
				xhr.send("champa="+idm);
			}

Bon ben c'est cool, cette nuit au boulot j'ai réfléchi au problème et ça fonctionne, voici mon code pour info :
Le fichier test.php

Code:

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
 
<?php
require_once '../include/class.lib.php';
$a = new lib();
echo $a->entete();
?>
<script lanuage="javascript" type="text/javascript">
function createRequestObject()
{
    var ro;
    ro = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    return ro;
}
 
var http = createRequestObject();
 
function GetIdCountry()
{
    var ID_Country = document.getElementById('countryList').options[document.getElementById('countryList').selectedIndex].value;
    return ID_Country;
}
 
function GetIdState()
{
    var ID_State = document.getElementById('stateList').options[document.getElementById('stateList').selectedIndex].value;
    return ID_State;
}
 
function sndReq(param,arg1,arg2)
{
    var IdCountry = GetIdCountry();
    http.open('get', './ajax.php?param='+param+'&IdCountry='+IdCountry);
    http.onreadystatechange = handleResponse;
    http.send(null);
}
 
function sndReq2(param)
{
    var IdState = GetIdState();
    http.open('get', './ajax.php?param='+param+'&IdState='+IdState);
    http.onreadystatechange = handleResponse;
    http.send(null);
}
 
function handleResponse()
{
    if (http.readyState == 4) {
        var response = http.responseText;
        var update = new Array();
 
        if (response.indexOf('|') != -1) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}
</script>
</head>
<body>
 
<form action="" method="POST">
<select id="countryList" name="countryList" size="1" onChange="sndReq('State')">
<option>Choisissez votre pays</option>
 
<?php
$queryCountry = $a->query('SELECT ID_Country, CountryName FROM Country ORDER BY CountryName ASC');
while ($resultCountry = mysql_fetch_array($queryCountry)) {
    echo '<option value="'.$resultCountry['ID_Country'].'">'.$resultCountry['CountryName'].'</option>';
}
?>
</select><br>
 
<div id="State"></div>
<input type="submit">
</form>
 
<pre>
<?php
print_r($_POST);
?>
</pre>
 
</body>
</html>

Et le fichier ajax.php

Code:

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
 
<?php
require_once '../include/class.lib.php';
$a = new lib();
 
switch ($_REQUEST['param']) {
/** ******************************************************************************
 * Generation de la liste des etats
 */
case 'State':
    $stateList = '<select size="1" id="stateList" name="stateList" onChange="sndReq2(\'City\')">
    <option>Choix du departement</option>';
    
    $sqlState = 'SELECT ID_State, StateName FROM State WHERE ID_Country = '.$_REQUEST['IdCountry'];
    
    $queryState = $a->query($sqlState);
    while ($resultState = mysql_fetch_array($queryState)) {
        $stateList .= '<option value="'.$resultState['ID_State'].'">'.$resultState['StateName'].'</option>';
    }
 
    $stateList .= '</select><br><div id="City"></div>';
    
    echo 'State|<br>'.$stateList;
    break;
    
/** ******************************************************************************
 * Generation de la liste des villes
 */
case 'City':
    $cityList = '<select size="1" name="cityList">';
    
    $sqlCity = 'SELECT ID_City, CityName, PostCode FROM City WHERE ID_State = '.$_REQUEST['IdState'];    
    
    $queryCity = $a->query($sqlCity);
    while ($resultCity = mysql_fetch_array($queryCity)) {
        $cityList .= '<option value="'.$resultCity['ID_City'].'">'.$resultCity['CityName'].' ('.$resultCity['PostCode'].')</option>';
    }
 
    $cityList .= '</select><br><div id="NoCity"></div><a href="javascript:sndReq(\'NoCity\')">Ville non trouvee</a>';
        
    echo 'City|<br>'.$cityList;
    break;
 
 
case 'NoCity':
    echo 'NoCity|<input type="text" size="30" name="NewCityName">';
    break;
}
?>

Ces fichiers ne me servent que pour mes tests mais ça fonctionne très bien