[AJAX] Select list et selected value

**Polymorph** · 12/10/2009, 20h53

Bonjour !

Voila j'essaie depuis ce matin de faire une liste chainer pour le pays département, region...

cela fonctionne ! mais parcontre dès que je soumet le formulaire il perd les values !

Voici mon code location.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
<?php
 
        header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
        header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
        header("Cache-Control: no-cache, must-revalidate");
        header("Pragma: no-cache");
        header("content-type: application/x-javascript; charset=utf-8");
 
        require("connect.php");
 
        $data = $_GET['data'];
        $val  = $_GET['val'];
 
        if($data == 'states')
        {
                echo "<select name=\"states\" onchange=\"dochange('region', this.value)\" class=\"location\">\n";
                echo "<option value='0'>Choose state</option>";
 
                foreach(MYSQLLocation::getCountries() as $country)
                {
                        echo '<option value="'.$country['id_country'].'">'.utf8_encode($country['fr'])."</option>\n";
                }
        }
 
        else if($data == 'region')
        {
                echo "<select name=\"regions\" onchange=\"dochange('departement', this.value)\" class=\"location\">\n";
                echo '<option value="0">Selectionnez une region</option>'."\n";
 
                foreach (MYSQLLocation::getRegions($val) as $region)
                {
                        echo '<option value="'.$region['id'].'">'.utf8_encode($region['name'])."</option>\n";
                }
        }
 
        else if($data == 'departement')
        {
                echo "<select name=\"departements\" onchange=\"dochange('city', this.value)\" class=\"location\">\n";
                echo '<option value="0">Chose a region</option>'."\n";
 
                foreach (MYSQLLocation::getDepartements($val) as $dep)
                {
                        echo '<option value="'.$dep['id'].'">'.$dep['id']." - ".utf8_encode($dep['name'])."</option>\n";
                }
        }
 
        else if($data == 'city')
        {
                echo '<select name="cities" class=\"location\">'."\n";
                echo '<option value="0">Selectionnez une Ville</option>'."\n";
 
                foreach (MYSQLLocation::getCities($val) as $city)
                {
                        echo '<option value="'.$city['id'].'">'.$city['zipcode'] . " - " .utf8_encode($city['city'])."</option>\n";
                }
        }
 
        echo "</select>\n";
 
?>

Mon fichier javascript :

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
function getXHR()
{
   try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
   try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
   alert("XMLHttpRequest not supported");
   return null;
}
 
function dochange(src, val)
{
     var req = getXHR();
 
     req.onreadystatechange = function ()
     { 
          if (req.readyState == 4)
          {
               if (req.status == 200)
               {
                    document.getElementById(src).innerHTML=req.responseText;
               } 
          }
     };
 
     req.open("GET", "http://www.monsite.dev/ajax/location.php?data="+src+"&val="+val);
     req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
     req.send(null);
}
 
window.onLoad=dochange('states', -1);

et mon fichier php d'affichage (je met que la partie concerné)

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
<tr>
		<td>Pays : </td>
		<td>
			<div id="states">&nbsp;</div>
		</td>
	</tr>
 
 
	<tr>
	<td>Region : </td>
	<td><div id="region">
	<select disabled="disabled" class="location">
		<option value="0">Veuillez choisir un pays</option>
	</select>
		</div></td>
	</tr>
 
 
	<tr>
	    <td>Departement : </td>
	    <td>
		<div id="departement">
			<select disabled="disabled" class="location">
			<option value="">Veuillez choisir un departement</option>
			</select>
			</div>
		</td>
	</tr>
 
 
	<tr>
		<td>Ville : </td>
		<td>
		<div id="city">
		<select name="cities" disabled="disabled" class="location">
			<option value="">Veuillez choisir une ville</option>
		</select>
	</div></td>
</tr>

Je sais pas si c'est super clean mais trouver des dropdowns sur le net qui gère le selected j'ai pas trouver ! même au us

Donc si quelqu'un à un tuyau je suis prenneur

**E.Bzz** · 13/10/2009, 10h47

Bonjour,
je pense que c'est dû à la création de tes select via innerHTML.
Dans ce cas, le name est mal pris en compte, et comme c'est lui qui est utilisé pour la soumission du formulaire ...
Pour corriger ça, tu peux essayer dans un premier temps de remettre à jour le name juste après la création de la liste : ajoute un id au select (dans ton script de création PHP appelé par Ajax), puis, juste après le retour Ajax (à la fin du onreadystatechange), tu réaffectes le name

Code :

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

document.getElementById('id_select').name = 'name_du_select';

Si ça ne fonctionne pas (ou si tu préfères le DOM

), tu peux créer entièrement tes select grâce aux méthodes DOM. Ca devrait corriger le problème ...

A+

**E.Bzz** · 13/10/2009, 10h52

Une discussion qui explore le problème

A+

**Polymorph** · 13/10/2009, 11h44

Merci pourr ton aide !

je me suis mis à ajax y'a pas longtemps...
Je me suis renseigné d'après tes liens, je me rend compte que innerHTML n'est pas conseillé !

Je vais donc suivre ton conseille et le faire en dom ! j'ai pas mal utilisé la class DOMDocument de php je devrais pas être trop perdu ! (j'espère lol)

je vais refaire ça et je reviendrais en cas de problème ou pour donner la solution !

++

**andry.aime** · 13/10/2009, 12h18

Bonjour,

Envoyé par E.Bzz

ajoute un id au select (dans ton script de création PHP appelé par Ajax), puis, juste après le retour Ajax (à la fin du onreadystatechange), tu réaffectes le name

IE n'accepte pas la modification de l'attribut name d'un élément.
Tu dois l'affecter durant la création de l'objet, sinon il y avait une discussion sur le forum javascript, un membre a fait un petit bricolage,

Code :

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

setAttribute('Name','sonNom');

Le "N" en majuscule.

**E.Bzz** · 13/10/2009, 12h25

Envoyé par andry.aime

IE n'accepte pas la modification de l'attribut name d'un élément.

Exact

Kernelfailure utilise en fait un hack qui permet de le faire ...
C'est à ça que je pensais ...

Mais dans tous les cas (quoiqu'on en dise) la méthode DOM est préférable ...

A+