[AJAX] Ajax et un formulaire(dans un div include)

**HWICE** · 07/09/2007, 16h37

Bonjour a tous
Ce matin je me suis lancer dans AJAX. J'ai un index avec un top, un gauche et au milieu, tous en div dans la meme page. Le top ne bouge jamais, le gauche est le menu, que lui est en php pour le login. Le mileux s'occupe du reste. Donc jai reussi a faire marche mon menu avec le milieux. Mais mes formulaire ne fonctionne plus. Je croit que c'est acause de la variable qui a besion le mileux qui est manquante quand tu click sur submit. Quanbd je click sur submit il retourne a la page dacceuil(amain.php) Je vous donne le code

index.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
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
<?php session_start();
session_register("username");
session_register("password");
session_register("Pmenu");
session_register("Peven");
session_register("Pspec");
session_register("PuserF");
session_register("id");
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Administration l'Eau à la Bouche</title>
<link href="../css/admin.css" rel="stylesheet" type="text/css" />
<script type='text/JavaScript'>
var xhr = null; 
function getXhr()
{
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject)
  { 
  try{
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
}
 
function ShowPage(page)
{
getXhr();
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('page').innerHTML=xhr.responseText;
     }
    }
xhr.open("GET","ajax.php?page="+page,true);
xhr.send(null);
}
 
</script>
</head>
<body  onLoad="ShowPage('amain')">
<? echo $page;?>
<div id="haut"><img src="../images/eau_admin.jpg" width="600" height="130" /></div>
<div id="gauche"><? if ($_SESSION['username'] != ''){ include ("bandeadmin.php");} else { include ("preadmin.php");}?></div>
<div id="page"></div>
</body>
</html>

gauche.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
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
<?php
 
include_once("../classes/userF.class.php");
?>
<table align="center"><tr><td><div align="center"><img src="../images/epy_admin.jpg" width="119" height="180"></div></td>
</tr>
<?  $D=new userF();
			$username11=$_SESSION['username'];
			$password11=$_SESSION['password'];
 define ("Q","SELECT * FROM userF WHERE username='$username11' AND password='$password11'");	
 $dp=$D->db->getdata(Q);
 $_SESSION['id']=$x['id'];
?>
<tr>
  <td><div align="center">
    <?= date("d/m/Y H:i") ?></div></td>
</tr>
<tr>
  <td>Bonjour
    <?=$_SESSION['username']?>
    </td>
</tr>
<tr>
      <td>
         <a href="../index.php">Accueil</a><br>
 
	  <img src="/images/dotrouge.gif" width="100" height="1" border="0">			  </td>
    </tr> 
    <tr>
      <td>
       <a href="#" onClick="ShowPage('preimpress')">Imprimer le menu</a><br>
 
	  <img src="/images/dotrouge.gif" width="100" height="1" border="0">			  </td>
    </tr> 
	<? foreach ($dp as $x) { 
 if ($x['Pmenu'] == 'ok'){
  $_SESSION['Pmenu']=$x['Pmenu'];
 
?>  
   <tr>
      <td>
         <a href="#" onClick="ShowPage('menu')">Mise &agrave; jour Menu</a><br>
 
	  <img src="/images/dotrouge.gif" width="100" height="1" border="0">			  </td>
    </tr>
       <tr>
      <td>
         <a href="#" onClick="ShowPage('decou')">Mise &agrave; jour D&eacute;couverte</a><br>
 
	  <img src="/images/dotrouge.gif" width="100" height="1" border="0">			  </td>
    </tr>
	<? }
	if ($x['Peven'] == 'ok'){
  $_SESSION['Peven']=$x['Peven'];
 
?> <tr>
      <td>
       <a href="#" onClick="ShowPage('event')">
Mise à jour des Actualités</a><br>
	  <img src="/images/dotrouge.gif" width="100" height="1" /></td>
    </tr><? }
	if ($x['Pspec'] == 'ok'){
  $_SESSION['Pspec']=$x['Pspec'];
 
?> 	<tr>
      <td>
         <a href="#" onClick="ShowPage('special')">
Mettre à jour
des spéciaux de dernière minute</a><br>
	  <img src="/images/dotrouge.gif" width="100" height="1" /></td>
    </tr>
	<? }
	if ($x['PuserF'] == 'ok'){
  $_SESSION['PuserF']=$x['PuserF'];
 
?> 
		<tr>
      <td>
        <a href="#" onClick="ShowPage('FormuUserF')">
Gestion des utilisateurs</a><br>
	  <img src="/images/dotrouge.gif" width="100" height="1" /></td>
    </tr>
 
	<? } } if ($_SESSION['username'] !=''){?>
 
		<tr>
			<td> <a href="deconnect.php">Se déconnecter</a></td>
		</tr>
		<? } else {}?>
</table>

un formulaire:

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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<?php
session_start();
session_register("username");
session_register("password");
session_register("privilege");
include_once("../classes/userF.class.php");
 
 
?>
<script type='text/javascript' language="JavaScript">
function verifSelection() {
if (mail_form.nom.value == "") {
alert("Veuillez utiliser un nom valide")
return false
} if (mail_form.prenom.value == "") {
alert("Veuillez utiliser un prenom valide")
return false
} if (mail_form.username.value == "") {
alert("Veuillez utiliser un nom d'usager valide")
return false
} if (mail_form.password.value == "") {
alert("Veuillez utiliser un mots de passe valide")
return false
} if (mail_form.password2.value == "") {
alert("Veuillez utiliser une confirmation de  mots de passe valide")
return false
} if (mail_form.email.value == "") {
alert("Veuillez utiliser un e-mail valide")
return false
}if (document.forms['mail_form'].elements['password'].value != document.forms['mail_form'].elements['password2'].value) {
alert("Les mots de passe ne sont pas similaires")
return false;
}
 
invalidChars = " /:,;'"
 
for (i=0; i<invalidChars.length; i++) {	// does it contain any invalid characters?
badChar = invalidChars.charAt(i)
 
if (mail_form.email.value.indexOf(badChar,0) > -1) {
alert("Votre adresse e-mail contient des caractères invalides. Veuillez vérifier.")
mail_form.email.focus()
return false
}
}
 
atPos = mail_form.email.value.indexOf("@",1)			// there must be one "@" symbol
if (atPos == -1) {
alert('Votre adresse e-mail ne contient pas le signe "@". Veuillez vérifier.')
mail_form.email.focus()
return false
}
 
if (mail_form.email.value.indexOf("@",atPos+1) != -1) {	// and only one "@" symbol
alert('Il ne doit y avoir qu\'un signe "@". Veuillez vérifier.')
mail_form.email.focus()
return false
}
 
periodPos = mail_form.email.value.indexOf(".",atPos)
 
if (periodPos == -1) {					// and at least one "." after the "@"
alert('Vous avez oublié le point "." après le signe "@". Veuillez vérifier.')
mail_form.email.focus()
return false
}
 
if (periodPos+3 > mail_form.email.value.length)	{		// must be at least 2 characters after the 
alert('Il doit y avoir au moins deux caractères après le signe ".". Veuillez vérifier.')
mail_form.email.focus()
return false
}} // Fin de la fonction
 
</script>
<?php
$X=new userF();
          if ($_POST)
        { 
$data["id"]=$_POST["id"];
$data["nom"]=$_POST["nom"];
$data["prenom"]=$_POST["prenom"];
$data["username"]=$_POST["username"];
$data["password"]=$_POST["password"];
$data["password2"]=$_POST["password2"];
$data["Pmenu"]=$_POST["Pmenu"];
$data["Pspec"]=$_POST["Pspec"];
$data["Peven"]=$_POST["Peven"];
$data["PuserF"]=$_POST["PuserF"];
$data["privilege"]=$_POST["privilege"];
$edit=$_POST["edit"];
$delete=$_POST["delete"];
$delok=$_POST["delok"];
if ($data["id"]) 
                                {if ($delete==1) {
        if ($delok==1){
      $X->deleteuserF($data["id"]);
          }
          else{
          echo ("<div id=\"error\"><h1>Vous devez cocher avant de supprimer</h1></div>");
    }}
                                        elseif ($edit==1) 
                                                {
                                                        $userF=$X->getuserF($data["id"]);
                                                } 
                                        else 
                                                {
                                                        $X->edituserF($data);
                                                }
                                }
                        else
                                {
                                        $X->newuserF($data);
                                }
 
                }
?>
<div id="pageadmin">
<form name="mail_form" method="post" action="#" onSubmit="return verifSelection()">
<? if ($userF) { ?><input type="hidden" name="id" value="<?=$userF['id']?>"><? }?>
<table width="600"><tr>
      <td>Nom</td>
      <td><input name="nom" type="text" value="<?=$userF['nom']?>"></td>
    </tr><tr>
      <td>Prénom</td>
      <td><input name="prenom" type="text" value="<?=$userF['prenom']?>"></td>
    </tr><tr>
      <td>Nom d'usager</td>
      <td><input name="username" type="text" value="<?=$userF['username']?>"></td>
    </tr><tr>
      <td>Mots de passe</td>
      <td><input name="password" type="password" value="<?=$userF['password']?>"></td>
    </tr><tr>
      <td>Confirmation du  mots de passe</td>
      <td><input name="password2" type="password" value="<?=$userF['password2']?>"></td>
    </tr>
 
	<tr>
      <td width>Privilège</td>
      <td width>Privilège Menu<input name="Pmenu" type="checkbox" <? if ($userF['Pmenu']){ echo 'checked';}?> value="ok"><br>
	  			Privilège Spéciaux<input name="Pspec" type="checkbox" <? if ($userF['Pspec']){ echo 'checked';}?> value="ok"><br>
				Privilège Événement<input name="Peven" type="checkbox" <? if ($userF['Peven']){ echo 'checked';}?> value="ok"><br>
				Privilège Utilisateur<input name="PuserF" type="checkbox" <? if ($userF['PuserF']){ echo 'checked';}?> value="ok"></td>
    </tr>
 
	<tr>
      <td valign="top"><input name="nbre_champs_texte" type="hidden" id="nbre_champs_texte" value="8">
        <input name="nbre_zones_texte" type="hidden" value="1">
<input name="nbre_email" type="hidden" value="1">
<input name="titre_nom" type="hidden" value="Nom"><input name="titre_prenom" type="hidden" value="Prénom"><input name="titre_username" type="hidden" value="Nom d\'usager"><input name="titre_password" type="hidden" value="Mots de passe"><input name="titre_password2" type="hidden" value="Confirmation du  mots de passe"><input name="titre_poste" type="hidden" value="Poste occupé"><input name="titre_email" type="hidden" value="E-mail"></td>
      <td><div align="center">
<input type="reset" name="Reset" value="Effacer">          
<input type="submit" name="envoi" value="Envoyer">
        </div></td>
    </tr>
  </table>
</form>
 
<table width="600">
<tr>
						<td width="14%" height="37%" colspan="2">
						<br />
						<br />
					  <br />Afficheur d'userF </td>
					</tr>
				<?
 
$x=$X->getalluserF();
foreach ($x as $userF) { ?>
					<tr>
						<td>User</td>
						<td width="86%"><?=$userF['username']?></td>
					</tr>
					<tr>
						<td>Prénom</td>
						<td><?=$userF['prenom']?></td>
					</tr>
					<tr>
						<td>Nom</td>
						<td><?=$userF['nom']?></td>
					</tr>
					<tr>
						<td>Password</td>
						<td><?=$userF['password']?></td>
					</tr>
					<tr>
						<td>Password2</td>
						<td><?=$userF['password2']?></td>
					</tr>
										<tr>
						<tr>
						<td>Privilège</td>
						<td>Privilège Menu<input name="Pmenu" disabled="true" type="checkbox" <? if ($userF['Pmenu']){ echo 'checked';}?> value="ok"><br>
	  			Privilège Spéciaux<input name="Pspec" disabled="true"  type="checkbox" <? if ($userF['Pspec']){ echo 'checked';}?>  value="ok"><br>
				Privilège Événement<input name="Peven" disabled="true"  type="checkbox" <? if ($userF['Peven']){ echo 'checked';}?> value="ok" >
				<br>
				Privilège Utilisateur<input name="PuserF" disabled="true"  type="checkbox" <? if ($userF['PuserF']){ echo 'checked';}?> value="ok"></td>
					</tr>
					<tr>	<td><form name="modif" method="post">
 
		    <input name="id" type="hidden" id="id" value="<?=$userF['id']?>" size="5" maxlength="5">
		    <input type="hidden" name="edit" value="1">
		    <input type="submit" name="ok" value="Modifier">
 
		</form>	</td><td>			      <form name="delvin" method="post">
 
		          <input name="id" type="hidden" value="<?=$userF['id']?>" id="id" size="5" maxlength="5">
		          <input type="checkbox" name="delok" value="1">
		          <input type="hidden" name="delete" value="1">
		          <input name="supprimer" type="submit" id="supprimer" value="Supprimer" />
 
	                      </form></td></tr>
					<tr>
						<td colspan="2"><a href="#haut">HAUT</a>		</td>
					</tr>
					<tr>
						<td colspan="2"><hr align="center"></td>
					</tr>
	<? }?>
 
				</table>
				</div>

et ajax.php:

Code :

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

1
2
3
4
5
6
7
8
9
<?php
 
$page=$_GET['page'];
	 if ($page == ''){
	include_once("amain.php");
	} else {
	include_once("$page.php");
	}
	?>

merci bien pour votre aide

**HWICE** · 07/09/2007, 21h15

en cliquant sur submit, le formulaire fait reloader le index.php et LA ajax ne trouve plus la variable qui lui disais d'afficher la page(par ex: formuUserF.php)

Est-il possible d,actualiser seulment le div ou se trouve le formulaire

**goulmak** · 08/09/2007, 09h58

Salut.

Avec le code suivant, il est normal que la validation du formulaire réactualise la page :

Code php :

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

1
2
 
<form name="mail_form" method="post" action="#" onSubmit="return verifSelection()">

Le fait d'avoir un "#" dans action en est la cause.
Pour corriger ton problème, je pense qu'une solution est de ne rien mettre dans action, et de modifier quelque peut l'évenement onSubmit du formulaire ainsi que les fonctions verifSelection et ShowPage.

Tu peux essayer quelque chose de ce type :

Code php :

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

1
2
 
<form name="mail_form" method="post" action="#" onSubmit="if(verifSelection()){ShowPage('ta_page');}return false;">

Si la fonction de vérification du formulaire renvoie true, c'est à dire que tous tes champs sont OK, alors tu reload juste le contenu du milieu avec la page qui va s'occuper de traiter le formulaire. Dans tous les cas tu renvois false à la fin, pour éviter le rechargement entier du site. Ainsi si ShwoPage est appelée, le contenu ciblé sera rechargé, sinon un message d'erreur sera affiché.

Il faut cependant transmettre à cette page les valeurs du formulaire, en modifiant ShowPage pour qu'elle utilise la méthode post (au lieu de get) et qu'elle transmette chacun des champs.

J'espère que ça t'aiguille un peu...

**HWICE** · 10/09/2007, 14h32

merci bien pour le code mais maleureusement ca ne fonctionne pas. Le index.php est tjs reloader quand je clique sur envoyer. J'ai vue sur quelque forum; un iframe. Quest-ce qu'un iframe? est-ce comme un frame? Si jutilise un iframe, a quoi me sert de metre des div alors, pcq je place des div avec le css et je deteste les frames.

merci

**goulmak** · 10/09/2007, 15h50

Je suis étonné que la page soit encore validée. A partir du moment ou tu mets un "return false" dans l'événement onSubmit, le formulaire n'est pas envoyé. Comme chez toi ça ne fonctionne pas, je dirais alors qu'il y a une erreur quelque part dans ta fonction verifSelection() (il manque des ; par endroits et surement autre chose). C'est la seule raison qui peut provoquer le squiz du "return false". Si tu veux en être convaincu essaye de faire un simple formulaire avec uniquement onSubmit="return false;", et tu verras que la page n'est pas réactualisée.

Pour l'iframe, ça peut être une solution lorsque l'on ne veut pas utiliser de l'ajax. Une iframe n'est pas une frame mais elle s'en rapproche. Quelque part dans ta page, ça te permet d'avoir un cadre avec le contenu d'une autre page, d'où le fonctionnement différent des frames ou tu découpes une page en plusieurs morceaux. Cela évite donc d'avoir recours à de l'ajax pour afficher ce nouveau contenu.

Dans ton cas, la solution de l'iframe, couplée avec l'attribut target du formulaire permet de faire la même chose qu'en ajax. Le formulaire validé enverra les champs vers l'iframe de ta page (un peu comme le fait gmail dans certains cas d'upload) qui peut être invisible aux utilisateurs mais bien présente, et qui traitera uniquement les données qu'elle reçoit.

J'ai essayé d'être assez claire et j'espère que tu as reçu les idées

**HWICE** · 10/09/2007, 16h10

bonjour

J'ai essayer ce que tu ma donner: onSubmit="return false;" quand j'envoi, rien ne se passe. On peut oublier la validation du formulaire, ten que ca marche c'est le principale. Pcq la peut importe le formulaire, il reload ma page. L'inscription se fait dans la base de donnée mais si j'ai a modifier, ca bloque!

Je vais le faire avec le iframe, dumoin essayer voir quesser ca donne

merci de ton aide

**HWICE** · 10/09/2007, 16h49

Bon la je croit que je vais laisser faire la techno de AJAX pour ma section admin, je me rend compte que ma programation en PHP et tout se que jai faite ne marche pas, ou demoin ca bugs, alors j'ai essayer ajax, je trouve ca bien mais pas pour MA section admin. Jai d'autre site ou ca fiterai plus. Merci et je reviendrai pour mon prochain site que je ferai en ajax

[AJAX] Ajax et un formulaire(dans un div include)

JavaScript

Discussions similaires

Partager

Partager