[AJAX] Formulaire et ajax

Version imprimable

Bonjour à tous,

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

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:

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>

20/03/2009, 10h40
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...

Le script javascript :

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
		<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:

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:

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']).

20/03/2009, 15h13
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.

Bonjour Toutouyoutou,

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

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

javascript.js :

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
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:

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:

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 :king:

21/03/2009, 04h14
llaffont

:cry: ??? 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:

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.
24/03/2009, 10h50
jamdinhe

Bonjour,

Citation:

Envoyé par llaffont

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

Code :

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.

Syntaxe
eval(String chaine)

Description
Evalue et exécute le code javascript contenu dans chaine.
Cette fonction est très utile pour générer du code javascript dans une chaîne de caractères et l'exécuter.

précisément, si tu remarque bien, le code PHP qui est appelé par xhr_object retourne du code de javascript,

et tout simplement, la fonction eval l'execute comme si qu'il était ecris auparavant, alors il interveint sur la page web sans la recharger (le javascript s'exécute du coté client)

PS: si Toutouyoutou est satisfait par la réponse, il est sympa qu'il met ce topic en Résolu, comme ça d'autres aurons a accéder directement si le titre ressemble a leur besoin
:king:
24/03/2009, 11h09
E.Bzz
Bonjour,
l'utilisation d'eval() est généralement déconseillée.

Il n'y avait pas besoin d'aller chercher de midi à 14h :
Code:

1 2 <td id='panne'> <select name='panne' style="width:275px">
Il suffit de ne pas donner à ton td un id correspondant au name du select ...
Par ailleurs, les modification faites via innerHTML à l'intérieur d'un <form> ne sont pas prise en compte par IE.

Dans la solution donnée, il aurait été beaucoup plus judicieux de n'envoyer que les valeurs et text des options puis de les intégrer dans la page via les instructions DOM, comme ici (et sans eval() ) ...

A+
25/03/2009, 10h58
Toutouyoutou

Merci a tous,

j'ai finalement opté pour la solution de jamdinhe.
25/03/2009, 11h42
E.Bzz

Citation:

Envoyé par Toutouyoutou

j'ai finalement opté pour la solution de jamdinhe.

Loin d'être la meilleure ...

Dommage :aie: