$.ajax, plusieurs valeurs envoyés par la valeur post

**lemirandais** · 30/12/2008, 18h15

Bonjour à tous.

Voila, j'ai encore un tout petit problème avec jquery. Je vous explique mon problème.

J'ai un formulaire afin que les visiteurs laissent des commentaires. Ce formulaire doit fonctionner en parallèle avec la méthode jquery $.ajax

Voici mon 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
 
<div id="formulairecom">
<h4 id="formulairecommentaire">Ajoute ton commentaire</h4>
<div id="formulairecommentairebox">
<form action="../../ajoutcommentaire.php" name="formulaire" method="post">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="50%">Pseudo : *</td><td><input type="text" name="pseudo" id="pseudo" style="width:250px;"/></td></tr>
<tr><td width="50%">E-Mail : *</td><td><input type="text" name="mail" id="mail" style="width:250px;"/></td></tr>
<tr><td width="50%">MSN :</td><td><input type="text" name="msn" id="msn" style="width:250px;"/></td></tr>
<tr><td width="50%">Site internet :</td><td><input type="text" name="siteinternet" id="siteinternet" value="http://" style="width:250px;"/></td></tr>
<tr><td width="50%">Blog :</td><td><input type="text" name="blog" id="blog" value="http://" style="width:250px;"/></td></tr>
<tr><td width="50%">Note : *</td><td><select name="note" id="note"><option value="5" selected="selected">5</option><option value="4">4</option><option value="3">3</option><option value="2">2</option><option value="1">1</option><option value="0">0</option></select></td></tr>
<tr><td width="50%">Commentaire : *</td><td><textarea name="commentaire" id="commentaire" style="width:250px;height:100px;" cols="50" rows="10"></textarea></td></tr>
<tr><td colspan="2">
<div style="display:none;">Ne pas compléter : <input type="text" name="name" id="name" /></div></td></tr>
<tr><td colspan="2">
<input type="hidden" name="id_actu" id="id_actu" value="<?php  echo $sql1['id_actu']; ?>" /></td></tr>
<tr><td colspan="2">
<input type="hidden" name="titre_actu" id="titre_actu" value="<?php  echo $sql1['titreurl']; ?>" /></td></tr>
<tr>
			<td colspan="2" align="center">
                        		<input type="submit" name="enregistrement" id="ajoutcom" value="Envoyer un message" />
			</td>
</tr>
</table>
</form>
</div>
</div>

Ce formulaire est présent à dans une url du type:
http://domaine/article/titre_article/index.html

La fonction $.ajax utilisé est celle ci dessous.

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
 
$(document).ready(function()
{
	$("#formulairecommentairebox").submit( function(event) {
  	event.preventDefault(); // empêche le traitement par défaut de l'évenement
	});
// 
//Lorsque on clique sur le bouton submit présent dans le div id="formnewsletter" faire ....
	$("#ajoutcom").submit(function()
	{
		//recuperation de la valeur qui de l'id #adresse
		var pseudonyme = $("#pseudo").val();
		var adressemail = $("#mail").val();
		var adressemsn = $("#msn").val();
		var site_internet = $("#siteinternet").val();
		var adresseblog = $("#blog").val();
		var notation = $("#note").val();
		var comment = $("#commentaire").val();
		var num_actu = $("#id_actu").val();
		var nom = $("#name").val();
		var enregistremt = $("#ajoutcom").val();
		//regex pour vérifier synthaxe adresse mail
		mailvalide = new RegExp ( "^\\w[\\w+\.\-]*@[\\w\-]+\.\\w[\\w+\.\-]*\\w$", "gi" ) ;
		if(mail != '' && mail.search(mailvalide) == -1)
		{
			$("#formnewsletter").html("Entrez une adresse mail valide<form action=\"newsletter.php\" method=\"post\">Tape ton adresse mail:<input type=\"text\" name=\"adresse\" id=\"adresse\"/><input type=\"submit\" value=\"S'inscrire\"/></form>");
			return false;
		}
		else
		{
				//lancement de la requete ajax pour envoyer l'adresse dans le fichier newsletter.php qui enregistrera les nouveaux abonnés
			$.ajax({
				url: '../../ajoutcommentaire.php',
				type: 'POST',
				data: 'pseudo=' + pseudonyme + '&mail=' + adressemail + '&msn=' + adressemsn + '&siteinternet=' + site_internet + '&blog=' + adresseblog + '&note=' + notation + '&commentaire=' + comment + '&id_actu=' + num_actu + '&nam=' + nom + '&enregistrement=' + enregistremt,
				success: function (data)
				{
					//renvoie du message pour confirmer ou infirmer l'inscription
					$("#formulairecommentairebox").html(data);
					//document.getElementById("formnewsletter").innerHTML=data;
				}
			});
			return false;	
		}	
	});
});

La page "ajoutcommentaire.php" est la page php contenant les requetes sql et le php permettant l'ajout d'un commentaire. Cette page est présente à l'adresse:
http://domaine/ajoutcommentaire.php

Le problème que j'ai, est que l'exécution via $.ajax ne fonctionne pas. Et je ne vois pas du tout pourquoi. Enfin je pense qu'il doit y avoir une erreur au niveau de la mise en place de toutes les valeurs en méthode post.

Quelqu'un pourrait-il m'aider? N'hésitez pas à me demander des informations supplémentaires pour m'apporter de l'aide.

**Bovino** · 30/12/2008, 19h22

Tu as essayé avec :

Code :

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

data: $('#formulaire:input').serialize(),

en précisant bien sûr l'id formulaire à ton formulaire.
Eventuellement aussi en mettant une url absolue.

**Bovino** · 30/12/2008, 19h25

Ah non, j'avais pas fait attention :

Code :

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

1
2
3
$("#formulairecommentairebox").submit( function(event) {
  	event.preventDefault(); // empêche le traitement par défaut de l'évenement
	});

$("#formulairecommentairebox") n'est pas un formulaire mais une div, donc pas d'événement submit, donc quand tu cliques sur ton submit, la soumission se fait et tu n'arrives pas à ta fonction jQuery

**lemirandais** · 30/12/2008, 20h44

Merci pour cette réponse.
Par rapport à l'event, j'avais pas fait attention. J'ai corrigé. Aucun changement, j'ai meme changer les valeurs du data mais aucun changement. Je remet les codes lié à jquery mais également mon 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
 
$(document).ready(function()
{
	$("#commentaireformulaire").submit( function(event) {
  	event.preventDefault(); // empêche le traitement par défaut de l'évenement
	});
// 
//Lorsque on clique sur le bouton submit présent dans le div id="formnewsletter" faire ....
	$("#commentaireformulaire").submit(function()
	{
		//recuperation de la valeur qui de l'id #adresse
		var pseudonyme = $("#pseudo").val();
		var adressemail = $("#mail").val();
		var adressemsn = $("#msn").val();
		var site_internet = $("#siteinternet").val();
		var adresseblog = $("#blog").val();
		var notation = $("#note").val();
		var comment = $("#commentaire").val();
		var num_actu = $("#id_actu").val();
		var nom = $("#name").val();
		var enregistremt = $("#ajoutcom").val();
		//regex pour vérifier synthaxe adresse mail
		mailvalide = new RegExp ( "^\\w[\\w+\.\-]*@[\\w\-]+\.\\w[\\w+\.\-]*\\w$", "gi" ) ;
		if(mail != '' && mail.search(mailvalide) == -1)
		{
			$("#formnewsletter").html("Entrez une adresse mail valide<form action=\"newsletter.php\" method=\"post\">Tape ton adresse mail:<input type=\"text\" name=\"adresse\" id=\"adresse\"/><input type=\"submit\" value=\"S'inscrire\"/></form>");
			return false;
		}
		else
		{
				//lancement de la requete ajax pour envoyer l'adresse dans le fichier newsletter.php qui enregistrera les nouveaux abonnés
			$.ajax({
				url: '../../ajoutcommentaire.php',
				type: 'POST',
				data: $('#commentaireformulaire:input').serialize(),
				success: function (data)
				{
					//renvoie du message pour confirmer ou infirmer l'inscription
					$("#formulairecommentairebox").html(data);
					//document.getElementById("formnewsletter").innerHTML=data;
				}
			});
			return false;	
		}	
	});
});

Mon 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
 
<div id="formulairecom">
<h4 id="formulairecommentaire">Ajoute ton commentaire</h4>
<div id="formulairecommentairebox">
<form action="../../ajoutcommentaire.php" id="commentaireformulaire" name="commentaireformulaire" method="post">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="50%">Pseudo : *</td><td><input type="text" name="pseudo" id="pseudo" style="width:250px;"/></td></tr>
<tr><td width="50%">E-Mail : *</td><td><input type="text" name="mail" id="mail" style="width:250px;"/></td></tr>
<tr><td width="50%">MSN :</td><td><input type="text" name="msn" id="msn" style="width:250px;"/></td></tr>
<tr><td width="50%">Site internet :</td><td><input type="text" name="siteinternet" id="siteinternet" value="http://" style="width:250px;"/></td></tr>
<tr><td width="50%">Blog :</td><td><input type="text" name="blog" id="blog" value="http://" style="width:250px;"/></td></tr>
<tr><td width="50%">Note : *</td><td><select name="note" id="note"><option value="5" selected="selected">5</option><option value="4">4</option><option value="3">3</option><option value="2">2</option><option value="1">1</option><option value="0">0</option></select></td></tr>
<tr><td width="50%">Commentaire : *</td><td><textarea name="commentaire" id="commentaire" style="width:250px;height:100px;" cols="50" rows="10"></textarea></td></tr>
<tr><td colspan="2">
<div style="display:none;">Ne pas compléter : <input type="text" name="name" id="name" /></div></td></tr>
<tr><td colspan="2">
<input type="hidden" name="id_actu" id="id_actu" value="<?php  echo $sql1['id_actu']; ?>" /></td></tr>
<tr><td colspan="2">
<input type="hidden" name="titre_actu" id="titre_actu" value="<?php  echo $sql1['titreurl']; ?>" /></td></tr>
<tr>
			<td colspan="2" align="center">
                        		<input type="submit" name="enregistrement" id="ajoutcom" value="Envoyer un message" />
			</td>
</tr>
</table>
</form>
</div>
</div>

**Sourrisseau** · 30/12/2008, 22h30

- Dans ta fonction $.ajax tu peux rajouter ajouter l'option 'error'. Elle pourra certainement te donner une idée ( le lien vers la doc http://docs.jquery.com/Ajax/jQuery.ajax#options)

- Ensuite si tu utilises firebug dans mozilla , tu peux voir les requêtes que tu envois au serveur ainsi que les réponses. Cela pourra t'aider grandement.

**lemirandais** · 31/12/2008, 11h34

Enfait, j'ai trouvé ce matin l'erreur. J'ai utilisé le serialize du post de Bovino. Le problème venait du fait que dans ma page de traitement en php. Mais bon, j'ai trouvé l'erreur.
Merci pour l'aide que vous m'avez tous apporté.

$.ajax, plusieurs valeurs envoyés par la valeur post

jQuery

Discussions similaires

Partager

Partager