[Prototype] [debutant] formulaire envoi par ajax

sebdug · 22/01/2008, 13h52

Hello !

Je galère depuis plusieurs jours à écumer le web à la recherche de comment faire un formulaire dont les variables sont envoyées via ajax et traitée par un fihcier php, tout ceci en se basant sur la lib mootools.

Alors j'ai tout qui fonctionne, le fichier php m'envoie le mail, mais les variables n'apparaissent pas dans le corps du mail.

J'ai l'impression que mes variables ne passent pas en fait vers le fichier php.

Alors j'ai des difficultés à trouver la bonne syntaxe avec mootools, cela vient certainement de là.

J'avais récup le meme code mais basé sur prototype.js, cela fonctionnait. Mais je veux absolument le faire avec mootools.

Une petite aide sioupléééé !

Voilà la requete ajax qui me pose soucis dans ma page 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
<html>
<head>
<title>Formulaire</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="mootools.js"></script>
 
 
<script type="" language="javascript">
function check() {
	var msg = "";
 
if ((document.formulaire.email.value == "")||(document.formulaire.email.value == "email")){
		msg += "Veuillez saisir votre email\n";
		document.formulaire.email.style.backgroundColor = "#ff358b";
	}else{document.formulaire.email.style.backgroundColor = "#ffffff";}
 
if ((document.formulaire.message.value == "")||(document.formulaire.message.value == "Message")){
		msg += "Veuillez saisir votre Message\n";
		document.formulaire.message.style.backgroundColor = "#ff358b";
	}else{document.formulaire.message.style.backgroundColor = "#ffffff";}
 
 
	if (msg == "") {SendForm();}
	else	{
		alert(msg);
			}
}
 
function SendForm(){
	$('BTsubmit').disabled='disabled';
	$('BTsubmit').value='en cours ...';
	$('message').disabled='disabled';
	$('email').disabled='disabled';
 
 
     var ajaxRequest = new Ajax('envoi.php', {
		  method:'post',
		  asynchronous: true,
		  contentType:'application/x-www-form-urlencoded',
		  encoding:'UTF-8',
		  onComplete: function(){MailOK();},
      });
 
	 /var requestVar = {
		  email: $('email'),
		  message: $('message')
	   };
 
     ajaxRequest.request();
 
 
 
function MailOK(){
		$('BTsubmit').style.visibility = 'hidden';
		$('BTsubmit').style.display = 'none';
		$('textOK').style.visibility = 'visible';
		$('textOK').style.display = 'block';
 
	}
}
 
 
</script>
 
</head>
 
<body>
<form name="formulaire" id="formulaire"  onsubmit="check();">
	adresse e-mail :<br />
	<input name="email" id="email" value="" size="30" maxlength="100">
	<br />
   <br />
	 message <br />
	<textarea name="message"  cols=30 rows=4 wrap="VIRTUAL" id="message"></textarea>
	<br />
	<br />
	<input id="BTsubmit" style="BACKGROUND-COLOR: #cccccc" type=button value="Envoyer" onClick="check(); " >
 
 
	<div id="textOK" style="visibility: hidden; display: none">votre message a bien été envoyé<br>merci</div>
 
</form>
</body>
</html>

et ma page envoi.php qui traite les variables et me les envoi dans mon mail:

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
<?
$message = $_POST['message'];
$email = $_POST['email'];
 
$header = "From: $email <$email>\nReply-To: $email <$email>";
$headers .= 'Mime-Version: 1.0'."\r\n";
$headers .= 'Content-type: text/html; charset=utf-8'."\r\n";
 
$texte = "
$email vous contacte via votre formulaire.\n\n
$message
";
 
$texte = stripslashes($texte);
 
mail('sebdug@free.fr','contact via site internet',$message, $header);
 
?>

sebdug · 22/01/2008, 21h25

Bon ben j'ai réutilisé prototype à la place de mootools. J'ai du enlever toute la partie js concernant l'ajax dans motools.js car sinonj'ai un conflit entre prototype et mootools. C'était la raison pour laquelle je voulais utiliser uniquement motools.js.

avec prototype ma requete ajax se fait comme suit et je recupère bien mes variables dans le php.

Code :

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

1
2
3
4
5
6
7
8
9
new Ajax.Request('FormContact.php',{
		method: 'post',
		asynchronous: true,
		contentType:  'application/x-www-form-urlencoded',
		encoding:     'UTF-8',
		parameters: { email : $F('email'),message: $F('message')},
		onSuccess: function(){MailOK();}, 
		onFailure: function(){}
	});

en fait dans la requete mootools c'est la ligne parameters qui me pose des problèmes. Il faut mettre "data" , mais le reste de la syntaxe ne doit pas etre bonne. D'ailleurs je ne comprend pas les "F" devant le $ pour la syntaxe prototype.

Si quelqun peut m'éclairer , ca serait cool d'utiliser uniquement le motools.js au lieu de mootools modifié et prototype. C'est un peu lourd.

thanx a lot !

sebdug · 23/01/2008, 10h11

personne pour un petit coup de pouce? je suis sur que c'est tout bete pour les "pros" comme vous

23/01/2008, 10h11	#3
sebdug Invité de passage Inscription : janvier 2008 Messages : 6 Détails du profil Informations forums : Inscription : janvier 2008 Messages : 6 Points : 0 Points : 0	personne pour un petit coup de pouce? je suis sur que c'est tout bete pour les "pros" comme vous
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email