[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 ?

[AJAX] Post dans un formulaire

AJAX

Vue hybride

Discussions similaires

Partager

Partager