[AJAX] Post dans un formulaire

**dam28800** · 16/12/2009, 11h27

Bonjour à tous,

J'ai un script qui me permet de sélectionner un élément d'une liste déroulante, et en fonction du choix de remplir des input de texte.
Cette partie fonctionne, hors lorsque je souhaite valider le formulaire et enregistrer les données des input text ils ne sont pas reconnus...

Voilà mon code :

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
37
38
39
40
41
42
43
44
45
46
47
48
	<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 go1(){
				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('heure').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_journee.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 de l'auteur
				sel = document.getElementById('journee');
				id_journee = sel.options[sel.selectedIndex].value;
				xhr.send("id_journee="+id_journee);
			}
 
</script>

Je l'ai pris sur l'exemple des listes liées, le problème vient peut être de là...

Ma page ajax_journee.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
if(isset($_POST["id_journee"]))
	{
 
		$res = mysql_query("	SELECT debut_journee, fin_journee, heure_travaille
						   		FROM journee 
								WHERE id_journee=".$_POST["id_journee"]);
		$row = mysql_fetch_assoc($res);
		if ($row['debut_journee'] != "00:00:00") { $deb_read = 'readonly="readonly"'; } else { $deb_read = ""; }
		if ($row['fin_journee'] != "00:00:00") { $fin_read = 'readonly="readonly"'; } else { $fin_read = ""; }
		if ($row['heure_travaille'] != "00:00:00") { $trav_read = 'readonly="readonly"'; } else { $trav_read = ""; }
 
 
 
		echo '<table width="100%" cellpadding="0" cellspacing="0">
        <tr>
        <td  width="160px">Heure de début :</td>
      <td><input type="text" name="heure_debut"   value='.substr($row['debut_journee'],0, 5).' size="4" class="formulaire" style="text-align: center;" /></td>
      </tr>
         			<tr style="height: 5px;"></tr>
                    <tr>
                        <td align="left">Heure de fin :</td>
                        <td><input type="text" name="heure_fin"   value='.substr($row['fin_journee'],0, 5).' size="4" class="formulaire" style="text-align: center;" /></td>
             		</tr>
					<tr style="height: 5px;"></tr>
                    <tr>
                        <td align="left">Heure travaillé :</td>
                        <td><input type="text" name="heure_trav"   value='.substr($row['heure_travaille'],0, 5).' size="4" class="formulaire" style="text-align: center;" /></td>
             		</tr>
 
                 </table>';
 
	}

Merci d'avance de votre aide

**E.Bzz** · 16/12/2009, 12h10

Bonjour,
il serait plus simple de créer ta table (on utilise plutôt des DIV + CSS maintenant pour la mise en page

) ainsi que les input dès la création de la page, mais en la masquant (style.display="none").
Ensuite, via Ajax, tu n'aurais plus qu'à récupérer les valeurs (les différentes heures).
Il suffit alors de mettre à jour les input concernés puis d'afficher la table (style.display="block").

Cela devrait poser moins de problème à ton form ...

A+

**dam28800** · 16/12/2009, 14h01

Merci de ton aide.
Par contre je ne vois pas trop comment appliquer ta solution.
Car en fait dans ma page ou mon menu déroulant j'affiche le tableau dans cette partie de code :

Code :

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

1
2
3
 <div id='heure' style='display:inline'>
 
             </div>

Je ne vois pas trop comment adapter le code ajax pour remplir les input caché.
D'ailleurs ils doivent ressembler à ça :

Code :

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

 <input type="text" style="display:none;" name="heure_debut" />

Et l'ajax doit être modifié ici non ?

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
function go1(){
				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('heure').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_journee.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 de l'auteur
				sel = document.getElementById('journee');
				id_journee = sel.options[sel.selectedIndex].value;
				xhr.send("id_journee="+id_journee);
			}

Merci d'avance de ton aide.

**E.Bzz** · 16/12/2009, 14h17

Envoyé par dam28800

Merci de ton aide.
Par contre je ne vois pas trop comment appliquer ta solution.
Car en fait dans ma page ou mon menu déroulant j'affiche le tableau dans cette partie de code :

Code :

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

1
2
3
 <div id='heure' style='display:inline'>
 
             </div>

Ben pour l'instant il n'y est pas =>

Code :

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

1
2
3
4
5
6
7
<div id='heure' style='display:inline'>
<table id="table_heures" width="100%" cellpadding="0" cellspacing="0" style="display:none;">
        <tr>
        <td  width="160px">Heure de début :</td>
...
</tr></table>
</div>

(pas la peine de masquer les input : ils seront masqués et affichés en même temps que le tableau)

Envoyé par dam28800

Je ne vois pas trop comment adapter le code ajax pour remplir les input caché.

Simplement avec

Code :

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

document.getElementById('id_input').value=la_valeur;

(il faudrait donc ajouter un id à chacun, celui-ci pouvant être égal au name, sous réserve que chaque id reste unique).

Ta page appelée par Ajax n'a qu'à renvoyer les couples identifiant/valeur correspondant au différentes heures.
Pour ce faire, tu peux utiliser JSon, par exemple, ou encore définir toi-même un format ...

Une fois que tu auras récupéré les valeurs et les aura affectées chacune à l'input correspondant, tu n'auras plus qu'à afficher la table

Code :

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

document.getElementById("table_heures").style.display = "block";

A+

**andry.aime** · 16/12/2009, 14h30

Bonjour,
une discussion qui peux t'aider avec le conseil de E.Bzz : http://www.developpez.net/forums/d78...te-deroulante/

**dam28800** · 16/12/2009, 15h04

Bon j'ai pas trop réussi a mettre en place ta solution...
Mais en fait le problème vient de Mozilla.
Sous IE je n'ai pas le problème...
Je devrais passer par un fichier xml non ?

**E.Bzz** · 16/12/2009, 15h18

Envoyé par dam28800

Mais en fait le problème vient de Mozilla.
Sous IE je n'ai pas le problème...

C'est que tu as dû utiliser document.getElementById() sur un élément n'ayant qu'un name et pas d'id : FF ne fait pas la confusion, mais IE si (ce qui fait que ça fonctionne quand même

)

Mais sinon ce que tu veux faire, sur le principe, ne pose pas de problème particulier ...

A+

**dam28800** · 16/12/2009, 15h27

Ok sur le principe mais le problème c'est qu'avec ma méthode initiale ça passe pas sous FF.

tu as dû utiliser document.getElementById() sur un élément n'ayant qu'un name et pas d'id

Donc si dans ma page ajax_journee.php je met ça :

Code :

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

1
2
 
echo '<input type="text" name="heure_debut" id="heure_debut"   value='.substr($row['fin_journee'],0, 5).' size="4" class="formulaire" >';

Il a bien un Id la non ? mais ça ne fonctionne toujours pas...

J'ai mis ça dans le code javascript :

Code :

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

1
2
3
4
5
6
7
8
 
	if(xhr.readyState == 4 && xhr.status == 200){
						la_valeur = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('heure_debut').innerHTML = la_valeur;
 
					}
				}

Je vois bien mes données dans l'input mais les variables ne passe pas...

Merci encore de ton aide...

**E.Bzz** · 16/12/2009, 15h30

Envoyé par dam28800

Je vois bien mes données dans l'input mais les variables ne passe pas...

Tu as déjà de la chance, parce que pour un input c'est .value qu'il faut utiliser et non pas .innerHTML

Sinon, pour les "variables", je ne sait pas de quoi tu parles, puisque tu ne nous as pas dit ce que te renvoyais maintenant le responseText ...

Sinon, ta syntaxe est bonne si Ajax ne te renvoie que la valeur de "heure_debut" (ex : 18:00)

A+

**E.Bzz** · 16/12/2009, 15h36

Si tu ne veux pas utiliser JSon (je conçois que ça soit rébarbatif pour récupérer 3 pauvres valeurs

), tu peux faire plus simple :
il suffit qu'Ajax te renvoie les 3 valeurs avec un séparateur

Code :

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

08:00:00;18:00:00;09:00:00

Dans le onreadystatechange, tu n'as plus qu'as les récupérer dans un tableau (array) en faisant référence au séparateur :

Code :

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

var tab_reponses = xhr.responseText.split(";");

puis à les affecter aux input

Code :

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

1
2
3
document.getElementById('heure_debut').value = tab_reponse[0];
document.getElementById('heure_fin').value = tab_reponse[1];
document.getElementById('heure_travaille').value = tab_reponse[2];

et enfin afficher le tableau HTML

Code :

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

document.getElementById("table_heures").style.display = "block";

A+

**dam28800** · 16/12/2009, 15h41

En fait la j'essaye seulement avec un champ "heure de debut"

Ajax me remplit bien mon input avec la valeur mais mon input qui est dans un form et que je veux poster n'as pas l'aire d'être pris en compte dans ma page d'enregistrement.

Pour info j'ai mis le .value :

Code :

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

document.getElementById('heure_debut').value = la_valeur;

Apparemment le input ne se remplit plus, je ne sais pas ce que j'ai mal fait...

Je sais pas si je suis trop claire dans toutes mes explications...

**E.Bzz** · 16/12/2009, 15h43

Envoyé par dam28800

Je sais pas si je suis trop claire dans toutes mes explications...

Ben pas trop, non

Si tu nous montrais ton code actuel, ça simplifierait

EDIT : en précisant le résultat : ce qui fonctionne et ce qui ne fonctionne pas

A+

**dam28800** · 16/12/2009, 15h48

Oui oui je sais...

Bon là il y a du mieux mon input text a l'air de passer, c'est à dire que ma page d'enregistrement le voit bien.
Or il ne se remplit plus avec le code ajax.

Mon code 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
function go1(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
 
				if(xhr.readyState == 4 && xhr.status == 200){
						la_valeur = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('heure_debut1').innerHTML = la_valeur;
						 document.getElementById("heure_debut1").style.display = "block";
					}
				}
 
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_journee.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 de l'auteur
				sel = document.getElementById('journee');
				id_journee = sel.options[sel.selectedIndex].value;
				xhr.send("id_journee="+id_journee);
			}

Ma page de php :

Code :

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

1
2
3
4
5
6
7
8
9
10
<table id="table_heures" width="100%" cellpadding="0" cellspacing="0" >
        <tr>
        <td  width="160px">Heure de début :</td>
        <td> 
 
       <input type="text" name="heure_debut" id='heure_debut1'   value="" style="display:none;" size="4" class="formulaire" >
 
        </td>
 
</tr></table>

Ma page ajax_journee.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
if(isset($_POST["id_journee"]))
	{
 
		$res = mysql_query("	SELECT debut_journee, fin_journee, heure_travaille
						   		FROM journee 
								WHERE id_journee=".$_POST["id_journee"]);
		$row = mysql_fetch_assoc($res);
		if ($row['debut_journee'] != "00:00:00") { $deb_read = 'readonly="readonly"'; } else { $deb_read = ""; }
		if ($row['fin_journee'] != "00:00:00") { $fin_read = 'readonly="readonly"'; } else { $fin_read = ""; }
		if ($row['heure_travaille'] != "00:00:00") { $trav_read = 'readonly="readonly"'; } else { $trav_read = ""; }
 
 
		echo '<input type="text" name="heure_debut" id="heure_debut1"   value='.substr($row['debut_journee'],0, 5).' size="4" class="formulaire" >';
	}

Merci d'avance !

**E.Bzz** · 16/12/2009, 15h50

Envoyé par E.Bzz

pour un input c'est .value qu'il faut utiliser et non pas .innerHTML

A+

**E.Bzz** · 16/12/2009, 15h51

Heu ... encore un gros doute, là : elle renvoie quoi, ta page appelée par Ajax ?

A+

**dam28800** · 16/12/2009, 15h55

C'est bon ça fonctionne avec .value comme tu m'as dit !
Et oui ma page renvoyé le input j'ai modifié et c'est ok.

En revanche il va falloir remplir les deux autres input.

Je vais mettre :

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
 
if(xhr.readyState == 4 && xhr.status == 200){
						la_valeur = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('heure_debut1').value = la_valeur;
						 document.getElementById("heure_debut1").style.display = "block";
 
 
					}
 
				if(xhr.readyState == 4 && xhr.status == 200){
						la_valeur1 = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('heure_fin1').value = la_valeur1;
						 document.getElementById("heure_fin1").style.display = "block";
 
 
					}

Puis :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<table id="table_heures" width="100%" cellpadding="0" cellspacing="0" >
        <tr>
        <td  width="160px">Heure de début :</td>
        <td><input type="text" name="heure_debut" id='heure_debut1'   value="" style="display:none;" size="4" class="formulaire" ></td>
		</tr>
        <tr>
        <td  width="160px">Heure de fin :</td>
        <td><input type="text" name="heure_fin" id='heure_fin1'   value="" style="display:none;" size="4" class="formulaire" ></td>
		</tr>
 
        </table>