Données venant d'ajax non postées [Résolu]

senacle · 02/05/2008, 16h33

Voir le document joint pour une copie d'écran.

Lorsqu’on spécifie dans le champ « Nombre d’options » un nombre, les champs Option 1,… sont affichés en utilisant ajax.

Quand je clique sur Ajouter, les variables liées aux champs Option 1,… ne sont pas postées.

Pourtant, le code généré semble correct.

Voici le code généré (récupéré avec l'extension firefox webdevelopper) :

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
 
<form action="addelemgen.php" method="post" name="formelemgen">
</form>
<tbody>
	<tr>
		<td width="400"><b>Libellé</b>&nbsp;<input name="libelemgen" size="40" maxlength="255" type="text"></td>
		<td width="400"><b>Type</b>&nbsp;
			<select name="typeelemgen" onchange="javascript:champ_formulaire()">
				<option></option>
				<option value="2__CheckBox">Case à cocher</option>
				<option value="7__TextBox">Champ texte</option>
				<option value="5__Date">Date</option>
				<option value="3__Radio">Groupe d'options</option>
				<option value="6__Label">Label</option>
				<option value="4__Select">Liste déroulante</option>
				<option value="1__Blank">Zone de séparation</option>
				<option value="8__TextArea">Zone de texte</option>
			</select>
		</td>
	</tr>
	<tr>
		<td colspan="2" style="display: none;" id="size">
			<table>
				<tbody>
					<tr>
						<td><b>Expression rationnelle</b></td>
						<td><input name="regexpelemgen" size="100" maxlength="100" type="text"></td>
					</tr>
				</tbody>
			</table>
		</td>
		<td style="" id="nb_option">
			<table>
				<tbody>
					<tr>
						<td><b>Nombre d'options</b></td>
						<td><input name="nb_option" id="idjs_nb_option" size="10" maxlength="2" onkeyup="affiche_nb_option(document.getElementById('idjs_nb_option').value);" type="text"></td>
					</tr>
				</tbody>
			</table>
		</td>
		<td style="" id="option">
			<table>
				<tbody>
					<tr>
						<td><b>Option 1</b></td>
						<td><input name="nb_option_1" size="20" maxlength="100" type="text"></td>
					</tr>
					<tr>
						<td><b>Option 2</b></td>
						<td><input name="nb_option_2" size="20" maxlength="100" type="text"></td>
					</tr>
					<tr>
						<td><b>Option 3</b></td>
						<td><input name="nb_option_3" size="20" maxlength="100" type="text"></td>
					</tr>
				</tbody>
			</table>
		</td>
	</tr>
	<tr align="center">
		<td>&nbsp;</td>
	</tr>
	<tr align="center">
		<td colspan="2"><input name="fromadminelemgen" value="admin.php" type="hidden"><input name="ID_ELEMENT_MENU" value="4" type="hidden"><input value="Ajouter" onclick="javascript:validationelemgen()" type="button"></td>
	</tr>
</tbody>

Je devrais pouvoir récupérer nb_option_1, etc en POST, mais ce n'est pas le cas.

darkstar123456 · 02/05/2008, 21h43

Si tu affiches les variables $_POST avec print_r() tu n'as rien du tout ?

PS : Prochaine fois, prends le temps d'indenter ton code pour qu'on ai pas à le faire stp...

senacle · 05/05/2008, 08h03

Ben non, c'est pareil...

PS : J'ai posté mon message à la dernière minute, donc j'ai pas eu le temps de mettre le code en forme. C'est fait maintenant.

darkstar123456 · 05/05/2008, 08h28

Ton <form></form> a une portée nulle :

Code html :

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

1
2
3
 
<form action="addelemgen.php" method="post" name="formelemgen">
</form>

La balise </form> doit se trouver après ton dernier input (dans ton cas, le dernier est <input ..... type="button" />)

Perso, le <input type="button" /> marchait pas chez moi, j'ai donc mis input="submit" et tout fonctionne, voici le code que j'ai testé :

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
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
 
<form action="addelemgen.php" method="post" name="formelemgen">
 
<tbody>
	<tr>
		<td width="400"><b>Libellé</b>&nbsp;<input name="libelemgen" size="40" maxlength="255" type="text"></td>
		<td width="400"><b>Type</b>&nbsp;
			<select name="typeelemgen" onchange="javascript:champ_formulaire()">
				<option></option>
				<option value="2__CheckBox">Case à cocher</option>
				<option value="7__TextBox">Champ texte</option>
				<option value="5__Date">Date</option>
				<option value="3__Radio">Groupe d'options</option>
				<option value="6__Label">Label</option>
				<option value="4__Select">Liste déroulante</option>
				<option value="1__Blank">Zone de séparation</option>
				<option value="8__TextArea">Zone de texte</option>
			</select>
		</td>
	</tr>
	<tr>
		<td colspan="2" style="display: none;" id="size">
			<table>
				<tbody>
					<tr>
						<td><b>Expression rationnelle</b></td>
						<td><input name="regexpelemgen" size="100" maxlength="100" type="text"></td>
					</tr>
				</tbody>
			</table>
		</td>
		<td style="" id="nb_option">
			<table>
				<tbody>
					<tr>
						<td><b>Nombre d'options</b></td>
						<td><input name="nb_option" id="idjs_nb_option" size="10" maxlength="2" onkeyup="affiche_nb_option(document.getElementById('idjs_nb_option').value);" type="text"></td>
					</tr>
				</tbody>
			</table>
		</td>
		<td style="" id="option">
			<table>
				<tbody>
					<tr>
						<td><b>Option 1</b></td>
						<td><input name="nb_option_1" size="20" maxlength="100" type="text"></td>
					</tr>
					<tr>
						<td><b>Option 2</b></td>
						<td><input name="nb_option_2" size="20" maxlength="100" type="text"></td>
					</tr>
					<tr>
						<td><b>Option 3</b></td>
						<td><input name="nb_option_3" size="20" maxlength="100" type="text"></td>
					</tr>
				</tbody>
			</table>
		</td>
	</tr>
	<tr align="center">
		<td>&nbsp;</td>
	</tr>
	<tr align="center">
		<td colspan="2"><input name="fromadminelemgen" value="admin.php" type="hidden"><input name="ID_ELEMENT_MENU" value="4" type="hidden"><input value="Ajouter" onclick="javascript:validationelemgen()" type="submit"></td>
	</tr>
</tbody>
</form>
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>

senacle · 05/05/2008, 09h47

Je l'avais remarqué.
Je pense que c'est l'extension webdevelopper qui fait ça, de même que les différentes balises tbody, que je n'ai pas mis dans mon code.

Si le problème venait de <form>, aucune donnée ne serait postée, ce qui n'est pas le cas.
Seules les données nb_option_1 etc ne sont pas postées.

Le problème est donc ailleurs.
Est-ce que le fait d'afficher par ajax la partie concernée dans un tableau et non un div peut l'expliquer ?

Assimil · 05/05/2008, 09h50

C'est possible d'avoir la page en entier avec le JS pour pouvoirs faire des test stp ?

Pas le php par contre, juste la sortie HTML

senacle · 05/05/2008, 10h27

La partie html+js :

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
142
143
144
145
146
147
148
 
			<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
 
		<script language="javascript">
			//*******************************************************************************************************************************************************//
			//*												pour les éléments génériques												     *//
			//*******************************************************************************************************************************************************//
			function champ_formulaire() {
				size.style.display="none";
				nb_option.style.display="none";
				document.getElementById('idjs_nb_option').value = '';
				option.style.display="none";
				type_elemgen = formelemgen.typeelemgen.value.split('__')[1]/*on récupère le type html de l'élément*/
				if (type_elemgen=="TextBox") {
					size.style.display="";
					document.getElementById('size').focus();
				}
				if (type_elemgen=="Radio" || type_elemgen=="Select") {
					nb_option.style.display="";
					document.getElementById('idjs_nb_option').focus();
				}
			}
 
			//*******************************************************************************************************************************************************//
			/*on va utiliser ici les possibilités d'ajax pour afficher autant de champs que nécessaire pour entrer les libellés des optionsdans le cas de groupe de bouton radio et de zone de liste*/
			//*******************************************************************************************************************************************************//
			var xhr = null;
			function getXhr()
				{
				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;
					}
				}
			/* Méthode qui sera appelée sur le OnKeyUp du champ "nombre d'options"*/
			function affiche_nb_option(nombre)
				{
				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)
						{
						option.style.display="";
						response = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById("option").innerHTML = response;
						if (response=='')
							{
							document.getElementById("option").innerHTML = 'Une erreur est survenue.';
							}
						}
					};
					// Ici on va voir comment faire du post
					xhr.open("POST","Script/Affiche_Option.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
					xhr.send("nombre=" + nombre);
				}
			//*******************************************************************************************************************************************************//
			//*                                                                                                                                   fin ajax                                                                                                                                                         *//
			//*******************************************************************************************************************************************************//
			function validationelemgen() {
				if ((formelemgen.libelemgen.value == "") || (formelemgen.typeelemgen.value == "")) {
					alert("Veuillez remplir tous les champs !");
				} else {
					formelemgen.submit();
					}
				}
			//*******************************************************************************************************************************************************//
			//*												fin éléments génériques													     *//
			//*******************************************************************************************************************************************************//
		</script>
	</head>
	<body  >
		<table border="0" align="center" width="100%">
			<tr valign="top">
				<td>
					<table border="1" align="center">
						<form action="addelemgen.php" method="POST" name="formelemgen">
							<tr>
								<td width="400"><b>Libellé</b>&nbsp;<input type="text" name="libelemgen" size="40" maxlength="255"></td>
								<td width="400"><b>Type</b>&nbsp;
									<SELECT NAME="typeelemgen" onchange="javascript:champ_formulaire()">
										<OPTION></OPTION>
										<OPTION value="2__CheckBox">Case à cocher</OPTION>
										<OPTION value="7__TextBox">Champ texte</OPTION>
										<OPTION value="5__Date">Date</OPTION>
										<OPTION value="3__Radio">Groupe d'options</OPTION>
										<OPTION value="6__Label">Label</OPTION>
										<OPTION value="4__Select">Liste déroulante</OPTION>
										<OPTION value="1__Blank">Zone de séparation</OPTION>
										<OPTION value="8__TextArea">Zone de texte</OPTION>
									</SELECT>
								</td>
							</tr>
							<tr>
								<td colspan="2" style="display:none" id="size">
									<table>
										<tr>
											<td><b>Expression rationnelle</b></td>
											<td><input type="text" name="regexpelemgen" size="100" maxlength="100"></td>
										</tr>
									</table>
								</td>
								<td style="display:none" id="nb_option">
									<table>
										<tr>
											<td><b>Nombre d'options</b></td>
											<td><input type="text" name="nb_option" id="idjs_nb_option" size="10" maxlength="2" onKeyUp="affiche_nb_option(document.getElementById('idjs_nb_option').value);"></td>
										</tr>
									</table>
								</td>
								<td style="display:none" id="option"></td>
							</tr>
							<tr align="center">
								<td>&nbsp;</td>
							</tr>
							<tr align="center">
								<td colspan="2"><input type="hidden" name="fromadminelemgen" value="admin.php"><input type="hidden" name="ID_ELEMENT_MENU" value="4"><input type="button" value="Ajouter" onclick="javascript:validationelemgen()"/></td>
							</tr>
						</form>
					</table>
				</td>
			</tr>
			<tr>
			<td><br>
		</table>
	</body>
</html>

Le script Affiche_Option.php :

Code :

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

1
2
3
4
5
6
7
8
9
 
<?php
	echo "<table>";
	$nombre = @$_POST['nombre'];
	for ($i=1;$i<=$nombre;$i++) {
		echo "<tr><td><b>Option ".$i."</b></td><td><input type=\"text\" name=\"nb_option_".$i."\" size=\"20\" maxlength=\"100\"></td></tr>";
	}
	echo "</table>";
?>

Assimil · 05/05/2008, 13h42

Merci.

Il me faudrais aussi le addelement.php

A quoi sert le input avec admin.php ?

Sinon, pour commencer à regarder aussi de ton coté, utilise Firebug avec Firefox, tu verras quelques avertissement dans ton JS

senacle · 05/05/2008, 14h15

Je te donne le début de addelemengen :

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
 
<?php
	session_start();
	$id_element_menu_affichage = @$_POST['ID_ELEMENT_MENU'];
 
	if (isset($_POST["fromadminelemgen"])) { // On vérifie qu'on arrive bien de la page formulaire.php
 
		$libelemgen = $_POST["libelemgen"];
		list($idtypeelemgen, $htmltypeelemgen) = split('__', $_POST["typeelemgen"])/*on récupère l'id et le code html du type de de l'élément générique*/;
		$regexpelemgen = $_POST["regexpelemgen"];
		if ($htmltypeelemgen == "Radio" || $htmltypeelemgen == "Select") {
			$nb_option = $_POST["nb_option"];
			$option=array();
			$nom = '';
			for ($i=1;$i<=$nb_option;$i++) {
				$option[$i-1] = $_POST["nb_option_".$i];
				$nom .= substr($option[$i-1],0,2);
				echo $_POST["nb_option_".$i];
			}
			phpinfo(INFO_VARIABLES);
			print_r($_POST);
			if ($htmltypeelemgen == "Radio") {
				//$nom est le nom du groupe de bouton radio
				$nom = strtr($nom,'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝáâçèéêëîïðòóõúýÿ','AAAAAACEEEEIIIIOOOOOUUUUYaaceeeeiioooouyy');//on remplace tous les caractères accentués par les lettres non accentuées
				$nom = preg_replace('/([^- \'a-z]+)/i', '', $nom); // on remplace les caracteres autres que lettres, tiret, apostrophe et espace par rien
				$libelemgen = $nom;//dans le cas d'un groupe de bouton radio, le libellé ne sera pas affiché, mais sera utilisé pour le nom des boutons radio
			}
		}

La suite concerne l'insertion en base de données.
Le input avec admin.php sert à tester selon le profil de l'utilisateur connecté à mon site.

Je regarde avec firebug.
J'avais déjà repéré les petites erreurs js. Je les ai corrigées, mais je ne pense pas qu'elles soient à l'origine du problème.

senacle · 20/05/2008, 16h18

J'ai progressé.
Avec Firefox, ça ne marche pas, mais avec IE oui !

senacle · 12/06/2008, 14h19

J'ai beau creuser, je ne trouve pas pourquoi ça fonctionne sous IE et pas sous FF.

Voici les données postées sous IE 7.0.5730.13 :

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
 
libelemgen=>testff
typeelemgen=>7__Radio
 
regexpelemgen=>
 
nb_option=>2
 
nb_option_1=>op1
 
nb_option_2=>op2
 
fromadminelemgen=>admin.php
 
ID_ELEMENT_MENU=>4

et celles sous FF 2.0.0.14 :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
libelemgen=>testff
 
typeelemgen=>7__Radio
 
regexpelemgen=>
 
nb_option=>2
 
fromadminelemgen=>admin.php
 
ID_ELEMENT_MENU=>4

Pourtant, voici le code qui ressort avec firebug :

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
 
...
<td id="nb_option" style="">
<table>
<tbody>
<tr>
<td>
<b>Nombre d'options</b>
</td>
<td>
<input id="idjs_nb_option" type="text" onkeyup="affiche_nb_option(document.getElementById('idjs_nb_option').value);" maxlength="2" size="10" name="nb_option"/>
</td>
</tr>
</tbody>
</table>
</td>
<td id="option" style="">
<table>
<tbody>
<tr>
<td>
<b>Option 1</b>
</td>
<td>
<input type="text" maxlength="100" size="20" name="nb_option_1"/>
</td>
</tr>
<tr>
<td>
<b>Option 2</b>
</td>
<td>
<input type="text" maxlength="100" size="20" name="nb_option_2"/>
</td>
</tr>
</tbody>
</table>
</td>
...

C'est parfaitement normal.

Qui a une piste pour trouver l'origine du problème ?

senacle · 31/12/2008, 13h57

J'ai eu à coder une autre fonction ajax/php qui génère une liste multiple SELECT.
Je souhaite ensuite posté le formulaire contenant ce SELECT.
Et bien j'ai le même problème : les éléments du SELECT ne sont pas postés avec FF, mais le sont avec IE.

Dans FF, en regardant le "code source" de la page, le SELECT n'apparaît pas.
Par contre, en regardant le "code source généré" (avec webdevelopper), le SELECT apparaît.

On dirait que FF prend le code source, mais pas le code source généré.

senacle · 31/12/2008, 16h12

Un petit coup de validation W3C et une remise en forme aux standards, et maintenant, c'est bon.

En fait, il y avait mélange entre les balises form et table dans le html.
Du coup, FF ne retrouvait plus ses petits...

02/05/2008, 21h43	#2
darkstar123456 Membre Expert Inscription : mars 2008 Messages : 1 180 Détails du profil Informations personnelles : Âge : 28 Localisation : Belgique Informations forums : Inscription : mars 2008 Messages : 1 180 Points : 1 357 Points : 1 357	Si tu affiches les variables $_POST avec print_r() tu n'as rien du tout ? PS : Prochaine fois, prends le temps d'indenter ton code pour qu'on ai pas à le faire stp...
	00

05/05/2008, 08h03	#3
senacle Membre habitué Serge Inscription : octobre 2004 Messages : 337 Détails du profil Informations personnelles : Nom : Serge Localisation : France, Nord (Nord Pas de Calais) Informations forums : Inscription : octobre 2004 Messages : 337 Points : 124 Points : 124	Ben non, c'est pareil... PS : J'ai posté mon message à la dernière minute, donc j'ai pas eu le temps de mettre le code en forme. C'est fait maintenant.
	00

05/05/2008, 09h47	#5
senacle Membre habitué Serge Inscription : octobre 2004 Messages : 337 Détails du profil Informations personnelles : Nom : Serge Localisation : France, Nord (Nord Pas de Calais) Informations forums : Inscription : octobre 2004 Messages : 337 Points : 124 Points : 124	Je l'avais remarqué. Je pense que c'est l'extension webdevelopper qui fait ça, de même que les différentes balises tbody, que je n'ai pas mis dans mon code. Si le problème venait de <form>, aucune donnée ne serait postée, ce qui n'est pas le cas. Seules les données nb_option_1 etc ne sont pas postées. Le problème est donc ailleurs. Est-ce que le fait d'afficher par ajax la partie concernée dans un tableau et non un div peut l'expliquer ?
	00

05/05/2008, 09h50	#6
Assimil Nouveau Membre du Club Inscription : juin 2005 Messages : 92 Détails du profil Informations forums : Inscription : juin 2005 Messages : 92 Points : 39 Points : 39	C'est possible d'avoir la page en entier avec le JS pour pouvoirs faire des test stp ? Pas le php par contre, juste la sortie HTML
	00

05/05/2008, 13h42	#8
Assimil Nouveau Membre du Club Inscription : juin 2005 Messages : 92 Détails du profil Informations forums : Inscription : juin 2005 Messages : 92 Points : 39 Points : 39	Merci. Il me faudrais aussi le addelement.php A quoi sert le input avec admin.php ? Sinon, pour commencer à regarder aussi de ton coté, utilise Firebug avec Firefox, tu verras quelques avertissement dans ton JS
	00

20/05/2008, 16h18	#10
senacle Membre habitué Serge Inscription : octobre 2004 Messages : 337 Détails du profil Informations personnelles : Nom : Serge Localisation : France, Nord (Nord Pas de Calais) Informations forums : Inscription : octobre 2004 Messages : 337 Points : 124 Points : 124	J'ai progressé. Avec Firefox, ça ne marche pas, mais avec IE oui !
	00

31/12/2008, 13h57	#12
senacle Membre habitué Serge Inscription : octobre 2004 Messages : 337 Détails du profil Informations personnelles : Nom : Serge Localisation : France, Nord (Nord Pas de Calais) Informations forums : Inscription : octobre 2004 Messages : 337 Points : 124 Points : 124	J'ai eu à coder une autre fonction ajax/php qui génère une liste multiple SELECT. Je souhaite ensuite posté le formulaire contenant ce SELECT. Et bien j'ai le même problème : les éléments du SELECT ne sont pas postés avec FF, mais le sont avec IE. Dans FF, en regardant le "code source" de la page, le SELECT n'apparaît pas. Par contre, en regardant le "code source généré" (avec webdevelopper), le SELECT apparaît. On dirait que FF prend le code source, mais pas le code source généré.
	00

31/12/2008, 16h12	#13
senacle Membre habitué Serge Inscription : octobre 2004 Messages : 337 Détails du profil Informations personnelles : Nom : Serge Localisation : France, Nord (Nord Pas de Calais) Informations forums : Inscription : octobre 2004 Messages : 337 Points : 124 Points : 124	Un petit coup de validation W3C et une remise en forme aux standards, et maintenant, c'est bon. En fait, il y avait mélange entre les balises form et table dans le html. Du coup, FF ne retrouvait plus ses petits...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email