Discussion :

[Toutouyoutou]

Bonjour à tous,

Je suis un noob en ajax alors j'ai besoin de vous

En fait, j'ai un formulaire dans le quel j'utilise ajax pour remplir une liste ('panne') en fonction d'une autre ('composant').

Mais le problème vient quand j'envoie mon formulaire, je n'arrive pas récupérer la valeur de la liste remplie avec ajax (la liste 'panne'). Comment faire ?

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
     <td><select id="composant" name="composant" tabindex="" style="width:275px" onchange='go()'>
     <option value='-1'>Aucun</option>
	 <?php
                $requeteComp = "SELECT * FROM composant ORDER BY nom_composant";
                $retourComp = mysql_query($requeteComp);
                while($composant = mysql_fetch_array($retourComp)) {
                        echo '<option value="'.$composant["num_composant"].'">'.$composant["nom_composant"].'</option>';
                }
        ?>
	</select>
	</td>
     <td id='panne'>
		<select name='panne' style="width:275px">
			<option value='-1'>Choisir un composant</option>
		</select>
	 </td>

[DoubleU]

Merci de poster le code généré, c'est à dire seulement le html.

Merci de poster également le code javascript qui génère la liste, et le php associé, sinon a moins d'être devin, on ne va pas pouvoir faire grand chose...

[Toutouyoutou]

Le script 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
31
32
33
34
35
36
		<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;
			}
 
			function go(){
				var xhr = getXhr();
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
					document.getElementById('panne').innerHTML = leselect;
					}
				}
 
				xhr.open("POST","ajaxPanne.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('composant');
				idComposant = sel.options[sel.selectedIndex].value;
				xhr.send("idComposant="+idComposant);
			}
		</script>

ajaxPanne.php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
        include("../../private/_connect.php");
        echo "<meta http-equiv='content-type' content='text/html; charset=iso-8859-1' />";
        echo "<select id='panne' name='panne' style='width:275px'>";
        if(isset($_POST["idComposant"])){
                $res = mysql_query("SELECT num_panne, desc_panne FROM panne
                        WHERE num_composant=".$_POST["idComposant"]);
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["num_panne"]."'>".$row["desc_panne"]."</option>";
                }
        }
        echo "</select>";
?>

et mon form :

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
<form name='formPDF' method='POST' action='pdf_particulier.php' target='_blank'>
  <tbody>
    <tr>
     <th colspan="3">DESCRIPTIF DE LA PANNE</th>
    </tr>
    <tr>
     <th>Composant concern&eacute; | Panne</th>
     <td><select id="composant" name="composant" tabindex="" style="width:275px" onchange='go()'>
     <option value='-1'>Aucun</option>
	 <?php
                $requeteComp = "SELECT * FROM composant ORDER BY nom_composant";
                $retourComp = mysql_query($requeteComp);
                while($composant = mysql_fetch_array($retourComp)) {
                        echo '<option value="'.$composant["num_composant"].'">'.$composant["nom_composant"].'</option>';
                }
        ?>
	</select>
	</td>
     <td id='panne'>
		<select name='panne' style="width:275px">
			<option value='-1'>Choisir un composant</option>
		</select>
	 </td>
    </tr>
  </tbody>
</table>
<input type="submit" name="valid_pdf" value="Cr&eacute;er" />
</form>

Sur ma page suivante (pdf_particulier.php), je récupère mon numéro de composant ($_POST['composant']) mais je n'arrive pas à réccupérer mon numéro de panne ($_POST['panne']).

[Bovino]

Ta méthode pour mettre à jour ton formulaire est mauvaise.
innerHTML ajoute bien les éléments dans ta page, mais ceux-ci ne sont pas pris en compte par le formulaire.
Voir à ce sujet la contribution de SpaceFrog pour pallier à ce problème.

[jamdinhe]

Bonjour Toutouyoutou,

j'ai aussi eu le même besoin que toi,

voici comment que je l'ai re-écrit :

javascript.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
function request05(f)	{
			var l1    = f.elements["list1"];
			var l2    = f.elements["list2"];
			var index = l1.selectedIndex;
 
			if(index < 1)
				l2.options.length = 0;
			else {
				var xhr_object = null;
				if(window.XMLHttpRequest) // Firefox
					xhr_object = new XMLHttpRequest();
				else
					if(window.ActiveXObject) // Internet Explorer
						xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
					else { // XMLHttpRequest non supporté par le navigateur
						alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
						return;
					}
 
				xhr_object.open("POST", "species.php", true);
				xhr_object.onreadystatechange = function() {
				if(xhr_object.readyState == 4)
					eval(xhr_object.responseText);				
												}
 
				xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				var data = "family="+escape(l1.options[index].value)+"&form="+f.name+"&select=list2";
				xhr_object.send(data);
			}
		}

index.html:

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
<html>
<head>
	<SCRIPT language='javascript' src='scripts/javascript.js'></SCRIPT>
</head>
 
<body>
	<form class="CenteredForm" name="form_selects" id="form_selects" action="" method="" onsubmit="return false;">
		<fieldset>
			<legend>Faites un choix dans la liste de gauche<br />et observez le résultat dans celle de droite</legend>
			Famille&nbsp;:
			<select name="list1" id="list1" onchange="request05(this.form);">
				<option value="" selected="selected"></option>
 
				<option value="Canidés"             >Canidés</option>
				<option value="Félidés"             >Félidés</option>
				<option value="Équidés"             >Équidés</option>
				<option value="Bovidés"             >Bovidés</option>
			</select>
			&nbsp;&nbsp;&nbsp;Espèces&nbsp;:
			<select name="list2" id="list2" >
 
			</select>
		</fieldset>
	</form>
</body>
</html>

species.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
<?php
header('Content-type: text/html; charset=iso-8859-1');
 
$mysql_db = @mysql_connect("localhost", "root", "");
@mysql_select_db("base");
 
$query  = "SELECT `Species` FROM `Animals` WHERE `Family` = '".$_POST["family"]."'";
$query .= " ORDER BY `Species`";
$result = @mysql_query($query);
 
echo 'var o = null;';
echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];';
echo 's.options.length = 0;';
while($r = mysql_fetch_array($result))
	echo 's.options[s.options.length] = new Option("'.$r["Species"].'");';
 
@mysql_close($mysql_db);
?>

et bien entendus, j'ai créer la table "Animals" dans base de données "base" de mon PhpMyAdmin et remplis toute la table afin de profiter de la bonne exécution du code.

opte plutôt pour ce code, il est vraiment consistant

[llaffont]

??? Bon ne sert plus à rien puisque jamdinhe a trouvé une réponse à son problème. Mais je laisse tout de même ma soluce on ne sait jamais.???

Je me permettrais un ajout sur le fichier PHP.
Rajouter la condition "or die(mysql_error())" après le mysql_query

Puis remplace les $_POST par de $_REQUEST

ensuite tu testes simplement ta page PHP pour en voir le retour.

http://[...]/species.php?family=bovi...s&select=list2

Tiens nous au jus

Et si quelqu'un pouvait m'expliquer ce que fait exactement le

Code :

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

eval(xhr_object.responseText);

Une fois qu'il a reçu le resultat de la page PHP. Car j'arrive pas à comprendre comment il interprete les données retournées.