Discussion :

[ritpas]

Bonsoir,

Pour envoyer un simple mail via un formulaire j'utilise jquery et la fonction $.ajax.

Tout fonctionne bien sous Firefox, je reçoit bien le mail, alors que sous IE8 ça ne fonctionne pas.

Quelqu'un peux-t-il me donner une explication ? Ci-dessous mon code . Merci d'avance. Pascal

Pour info : ce code est tiré d'une page indépendant (ici contact.html) qui est chargée via une méthode jquery load() depuis une sorte de master page index.html. L'exemple online se trouve sur http://www.lemarcaire.fr/maquettes/jardins/ et le code correspond à la page http://www.lemarcaire.fr/maquettes/jardins/contact.html

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
<script type="text/javascript">
	   $("#envoi").click(function(){
 
			 $.ajax({
			   type: "POST",
			   url: "sendmail.php",
			   data: "nom="+$('[name=nom]').val()+"&tel="+$('[name=tel]').val()+"&courriel="+$('[name=courriel]').val()+"&message="+$('textarea').val(),
			   success: function(msg){
				 $("#formulaire").hide();
				 $("#info").empty();
				 if (msg=='ok')
					$("#info").append("<li>Votre message a bien été envoyé</li>");
				else 
					$("#info").append("<li>Une erreur a été rencontrée durant l'envoi du message. Merci de réessayer plus tard.</li>");
 
			   }
 
			 });
 
	   });
 
</script>
<h2>Contact</h2>
<p>Pour tout devis ou autre demande d'information, merci de compléter le fomulaire ci-dessous. Nous vous répondrons dans les plus brefs délais.</p>
<ul id="info" style="color : #900;margin-left : 30px"></ul>
 
	<table style="margin : 20px;border : 1px solid #b5ff1c;" cellspacing="10px" id="formulaire">
		<tr>
			<td><label>Nom ou raison sociale<sup>*</sup>  :  </label> </td>
			<td><input type="text" size="40" name="nom"/></td>
		</tr>
		<tr>
			<td><label>Courriel : </label></td>
			<td><input type="text" size="40" name="courriel"/></td>
		</tr>
		<tr>
			<td><label>Téléphone<sup>*</sup> : </label></td>
			<td><input type="text" size="40" name="tel"/></td>
		</tr>
		<tr>
			<td><label>Message<sup>*</sup>  : </label></td>
			<td><textarea type="text" rows="3" cols="31" name="message"/></td>
		</tr>
		<tr>
			<td></td>
			<td style="text-align : center">
 
				<button id="envoi" style="width : 100px">Envoyer</button>&nbsp
				<button id="reinit" style="width : 100px">Effacer</button>
			</td>
 
		</tr>
	</table>
 
<p>Vous pouvez également nous contacter par téléphone au <strong>03.88.55.42.41</strong> du lundi au vendredi de 9h00 à 18h00</p>
<p><sup>*</sup>  : champs obligatoires</p>

[Tristan Zwingelstein]

ça ne fonctionne pas.

Tu ne reçois pas le mail ?
Tu as une erreur ?

[ritpas]

Oui je ne reçois pas le mail.
Ca échoue en silence, c'est comme si rien ne se passait en cliquant sur le bouton

(remarque : avec Firefox, le formulaire disparaît et un message s'affiche comme quoi le mail a bien été envoyé et le mail arrive ffectivement dans ma boîte)

[Tristan Zwingelstein]

Essaye en mettant :

Code :

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

1
2
 
<input type="submit" ....

à la la place de ton "button"

Je vois aussi que tu n'utilises pas de formulaire

Code :

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

<form ...

Je te conseilles de faire ça et d'ensuite associé un évènement non pas de type "click" sur le bouton mais de type "submit" sur ton formulaire.

[ritpas]

Je l'avais déjà fait, là je l'ai refait et mis en ligne mais comme on peut le constater, non seulement avec IE8 ça ne marche pas (echec en silence, rien ne se passe) et avec Firefox ça ne marche plus non plus : il me recharge automatiquement la page d'accueil sans envoyer le 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
19
   $("form").submit( function() {
 
			 $.ajax({
			   type: "POST",
			   url: "sendmail.php",
			   data: "nom="+$('[name=nom]').val()+"&tel="+$('[name=tel]').val()+"&courriel="+$('[name=courriel]').val()+"&message="+$('textarea').val(),
			   success: function(msg){
				 $("#formulaire").hide();
				 $("#info").empty();
				 if (msg=='ok')
					$("#info").append("<li>Votre message a bien été envoyé</li>");
				else 
					$("#info").append("<li>Une erreur a été rencontrée durant l'envoi du message. Merci de réessayer plus tard.</li>");
 
			   }
 
			 });
 
	   });

[Tristan Zwingelstein]

Code :

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

<form onsubmit="return false;">

Pour empêcher la page de se recharger.

Ensuite fais un test pour voir si l'évènement est bien réceptionné lors du clic sur ton bouton sous ie.

[ritpas]

En fait, j'ai trouvé une solution, j'ai laissé comme j'avais fait, sans la balise form , par contre, j'ai mis le script de ma page contact.html sous la fonction $(document).ready et là ça marche sur FF et IE8.

Mais peut-être ta méthode marche-t-elle aussi...

Merci en tous cas .

Pascal