Discussion :

[guen]

Bonjour
Je n'y comprends rien...j'ai 2 listes déroulantes liées par ajax qui fonctionne bien (cad que j'ai la 2ème qui se mest à jour en fonction du choix à la première)... mais le post de mon formulaire ne me renvoi rien pour cette deuxième liste (cad que la variable $_POST['ma variable2'] est vide...)
voici le code si vous avez une idée...
le code du formulaire (tronqué)

Code :

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

1
2
3
4
5
 
<div id='com' style='display:inline'>
  <select name="com" class="formInput" id="com">
    <option value="-1">-S&eacute;lectionnez la commune--</option>
  </select>

le code de la fonction ajax appelée

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
 
<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('com').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxCom.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
				// ici, l'id du département
				sel = document.getElementById('dept');
				dept = sel.options[sel.selectedIndex].value;
				xhr.send("DEPT="+dept);
			}
		</script>

et le code php de remplissage de ma 2ème liste déroulante

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
	require_once('Connections/BourseDechets.php');
	echo "<select class='formInput' name='com' id='com'>";
	if(isset($_POST["DEPT"])){
		mysql_select_db($database_BourseDechets, $BourseDechets);
		$res = mysql_query("SELECT COM_INSEE, COM_NCCENR FROM tabcommunes WHERE COM_DEPT = '".$_POST["DEPT"]."' ORDER BY COM_NCCENR ASC");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["COM_INSEE"]."'>".htmlentities($row["COM_NCCENR"])."</option>";
		}
	}
	echo "</select>";

ma 2ème liste (communes) se mets à jour nickel mais quand je récupère la variable $_POST['com'] pour l'insérer dans ma bdd...elle est vide !
à l'aide !

[emmanuel.remy]

Code :

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

1
2
3
4
<div id='com' style='display:inline'>
  <select name="com" class="formInput" id="com">
    <option value="-1">-S&eacute;lectionnez la commune--</option>
  </select>

Tu as deux fois l'id "com". Change par exemple ainsi:

Code :

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

1
2
3
4
<div id='comContainer' style='display:inline'>
  <select name="com" class="formInput" id="com">
    <option value="-1">-S&eacute;lectionnez la commune--</option>
  </select>

Change aussi le reste:

Code :

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

1
2
3
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('comContainer').innerHTML = leselect;

Note que la logique habituelle est que ton script PHP renvoie les données brutes et que tu les insères ensuite via le DOM sans passer par un innerHTML.


ERE

[Bovino]

Effectivement, comme le souligne emmanuel.remy, le innerHTML te permet de modifier le contenu de ta page, mais il n'impacte pas sur l'envoi du formulaire. Il est donc préférable de passer par les méthodes du DOM pour insérer les éléments (en suivant le conseil d'emmanuel.remy de bien structurer les éléments renvoyés par ton script PHP). Ensuite, tu seras confronté à un autre problème concernant le name des éléments du formulaire qui ne sont pas modifiables dynamiquement avec IE, voir une solution ici

[arnoweb]

J'ai le même problème.
Mon formulaire POST qui contient une liste qui update un autre liste via Ajax par l'utilisation de prototype.js avec l'utisation de la methode Ajax.updater.
Après l'update de la 1ère liste avec la 2ème, je ne trouve plus dans mon tableau $_POST de php la valeur de la 2ème liste.

Cette 2ème liste est construite à partir d'un appel à un script php dont les données proviennent d'une table mysql.

Je suppose que Ajax.updater de prototype.js utilise la fonction innerHTML.

Comment passer par le DOM ? Je veux bien faire une sortie XML de mes données, mais comment les passer en js ?

[emmanuel.remy]

Salut,

Utilise

Code :

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

new Ajax.Request(...)

Pour plus d'info: http://amillet.developpez.com/tutori...jax-prototype/



ERE

[andry.aime]

Salut,
je pense que ça peut vous aider à éviter le innerHTML:
http://www.developpez.net/forums/d77...x/#post4489970

[arnoweb]

Ca marche, j'ai trouvé mon erreur.
J'utilisais new Ajax.updater via l'id d'une div qui affichait la liste select.
Or si j'utilise directement l'id du select via Ajax.updater, cela ne modifie pas le select entier mais uniquement le contenu du select, c'est à dire les balises options.
Du coup, je récupère bien la value de l'option après validation du formulaire par la méthode POST.