Formulaire envoi de mail - Ajax, JavaScript

Question

youki

20 Feb 2009 à 19:15

Bonjour je souhaite avancer et inclure dans mon site quelques éléments en JavaScript. Notamment la confirmation d'envois de mails. Je commence à peine que déjà je galère.

Pour faire ma confirmation en live d'envoi de mail, je pensais m'appuyer sur un code déjà effectué et qui se trouve ici(http://www.javascriptfr.com/codes/ENVOI-FORMULAIRE-AVEC-AJAX_41732.aspx ).

En l'arrangeant un zeste ça me donne ceci pour la partie script dans <head>


 <script type="text/javascript" src="prototype.js"></script> 
     <script type="" language="javascript">
 function SendForm(){
 $(\'BTsubmit\').disabled=\'disabled\';
 $(\'BTsubmit\').value=\'en cours ...\';
 $(\'message\').disabled=\'disabled\';
 $(\'email\').disabled=\'disabled\';

 new Ajax.Request(\'form.php\',{
 method: \'post\',
 asynchronous: true,
 contentType: \'application/x-www-form-urlencoded\',
 encoding: \'UTF-8\',
 parameters: { mail : $F(\'mail\'),corps: $F(\'corps\'),sujet: $F(\'sujet\'),liste: $F(\'liste\')},
 onSuccess: function(){MailOK();},
 onFailure: function(){}
 });

 function MailOK(){
 $(\'BTsubmit\').style.visibility = \'hidden\';
 $(\'BTsubmit\').style.display = \'none\';
 $(\'textOK\').style.visibility = \'visible\';
 $(\'textOK\').style.display = \'block\';
 }
 }
 </script>

Pour la partie formulaire j'ai ceci:


	<form action="contact2.php" method="post" onsubmit="SendForm()" >
					Merci de préciser le type de question pour mieux répondre à vos attentes:<br />
					<select name="liste" id="liste" >
          <option value="com"> Question sur l\'assoce (avions, membres, terrain...)</option>
          <option value="web"> Question liée au site web uniquement</option>
          </select>
           <br/>
          Votre email pour réponse:<br />
          <input type="text" name="mail" id ="mail"  size="57" align="right" /><br />
					Sujet:<br />
					<input type="text" name="sujet" id ="sujet"  size="57" align="right" /><br />
					Texte: <br />
					<textarea rows="16" id ="corps" name="corps" cols="62" >Bonjour,</textarea>
					<br /><img src="./style/verif.jpg" alt="" /><br />
					 (anti-spam systeme) Quel animal apparait fiérement sur la photo. Un 
					<input type="text" name="code" size="5" align="right" /><br />
						<br />
						<br/>
					<input type="submit" id="BTsubmit" value="Envoyer" name="envoyer" onclick="SendForm()" />
					<input type="reset" value="Effacer" name="B2" />
					<div id="textOK" style="visibility: hidden; display: none">votre message a bien été envoyé<br/>merci</div> 
					
					</form>

Mais rien ne fonctionne.
- j'ai bien créé une page form.php (qui contient la fonction mail() php)
- J'ai bien le fichier "prototype.js" accessible dans le même repertoire.

Ma définition de "ne marche pas": J'écris le mail, je clique sur ok et:

le bouton envoyer se grise (ça c'est bien)
la page se recharge (a ba non, ça je voulais éviter)
le mail n'est pas envoyé & je n'ai pas de message a apparaitre (remarquez, c'est cohérent etant donne que le message n'apparait que si cela fonctionne)
_______________

Je n'y connais malheureusement pas grand chose... mais!

Sur l'exemple de javascript.fr il propose de mettre:

 <form> [...]</form>

or si je fais cela ce n'est plus valide w3c. Donc j'ai essayé en rajoutant un "action="" ". Mais cela ne fonctionne toujours pas.(dans l'exemple du code j'ai essayer encore une autre solution: ça ne fonctionne pas non plus)
Quelle est la syntaxe valide, sachant que dans le <script> la méthode est précisé (post).

Désolé pour les questions de newbie,
Smiley sweatdrop

Modifié par youki (20 Feb 2009 - 20:54)

Sujet clos