[AJAX] form ajax jquery

Version imprimable

bonjour,

Code:

1
2
3
$("#envoyer").live("click", function(){
	writeP( 0, $("#nom").val(), $("#prenom").val(), $("#adresse").val(), $("#codePostal").val(), $("#ville").val(), $("#pays").val(), $("#email").val());
							});

Code:

1
2
3
4
5
6
7
8
9
10
function writeP(id, nom, prenom, adresse, codePostal, ville, pays, email) {
   $.ajax({
	type: "POST",
	url: "writePersonneSGBD.php",
	data: "id=" + id + "&nom=" + nom + "&prenom=" + prenom +"&adresse=" +adresse +"&codePostal=" + codePostal +"&ville=" +ville +"&pays=" +pays +"&email=" +email,
	success: function(out) { 
		$("#container").html(out);
		}
	});
}

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
<div id="container">
<form method="POST" action="#">
<input type="hidden" name="id" value="0"/>
<br/>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom"/>
<span class="error-message"/>
<br/>
<label for="prenom">Prenom :</label>
<input type="text" id="prenom" name="prenom"/>
<span class="error-message"/>
<br/>
<label for="adresse">Adresse :</label>
<input type="text" id="adresse" name="adresse"/>
<span class="error-message"/>
<br/>
<label for="codePostal">Code Postal :</label>
<input type="text" id="codePostal" name="codePostal"/>
<span class="error-message"/>
<br/>
<label for="ville">Ville :</label>
<input type="text" id="ville" name="ville"/>
<span class="error-message"/>
<br/>
<label for="pays">Pays :</label>
<input type="text" id="pays" name="pays"/>
<span class="error-message"/>
<br/>
<label for="email">Email :</label>
<input type="text" id="email" name="email"/>
<span class="error-message"/>
<br/>
<input type="submit" value="Envoyer" id="envoyer"/>
</form>
</div>

alors voilà mon problème : lorsque je clique sur "envoyer", ma fonction writePersonneSGBD.php appelée par WriteP, est bien exécutée côté serveur (enregistrement créé dans la base de données) mais impossible de récupérer la chaîne de caractère en retour et donc de mettre à jour mon div "container".
de plus, il y a qqch que je ne comprends pas c'est qu'après l’exécution de WriteP qui se trouve dans index.php, le code html de index.php est à nouveau "interprêté" et un nouveau formulaire est affiché.

je m'excuse de ne pas être bien claire mais n'hésitez pas à me poser des questions.

bonne journée.

merci.

20/07/2011, 11h50
Bovino

D'après toi, qu'est-ce qui se passe lorsque tu cliques sur le bouton submit d'un formulaire... :roll:
20/07/2011, 12h11
nowayy

et bien je dirais que ça dépend comment est implémenté le code mais en général un formulaire quand on le submit il declenche l'execution d'un fichier sur le serveur.

là je n'ai pas tout mis par souci de visibilité, mais avant d'appeler writeP , je valide tous les champs à l'aide d'expresions regulieres et ... je ne comprends pas ta question...très simple mais je ne vois pas où tu veux en venir...:calim2:
20/07/2011, 12h15
nowayy

tu veux dire que je n'ai pas besoin du formulaire, que c'est lui qui pose problème ? (vais l'enlever pour voir)
20/07/2011, 12h18
nowayy

merci Bovino :) ça marche !!!!!
20/07/2011, 12h19
Bovino

Je veux en venir au fait que soumettre un formulaire, c'est similaire à un lien hypertexte : tu changes de page en transmettant les données du formulaire.
Dans ton cas, lorsque tu cliques sur le submit, tu exécute le code associé au bouton (donc l'appel AJAX est effectué), puis tu changes de page, donc

Citation:

après l’exécution de WriteP qui se trouve dans index.php, le code html de index.php est à nouveau "interprêté" et un nouveau formulaire est affiché.

Change le type de l'input en button au lieu de submit et tu comprendras la différence.
20/07/2011, 12h28
nowayy

ok merci pour l'info.

avant ton dernier message j'avais enlevé les balises <form></form>

et là j'ai modifié mon input en button.

tu penses que ce serait plus propre de rajouter les balises <form></form> ?

encore merci :ccool: