[AJAX] Script d'un formulaire de contact de base

A
Anonymous
Guest
Bonjour à tous,

Dans la lignée du post d'Olivier sur la programmation en AJAX pour les titres des sujets d'un forum, je vous soumets un exemple basique de dév d'un formulaire en AJAX:
en 3 fichiers...

le fichier contact_forum.php
Code:
<script type="text/javascript">
url = document.location.href;
xend = url.lastIndexOf("/") + 1;
var base_url = url.substring(0, xend);
var ajax_get_error = false;
function ajax_do (url) {
	if (url.substring(0, 4) != 'http') {
		url = base_url + url;
	}
	var jsel = document.createElement('SCRIPT');
	jsel.type = 'text/javascript';
	jsel.src = url;
	document.body.appendChild (jsel);
	return true;
}
function ajax_get (url, el) {
	if (typeof(el) == 'string') {
		el = document.getElementById(el);
	}
	if (el == null) { return false; }
	if (url.substring(0, 4) != 'http') {
		url = base_url + url;
	}
	getfile_url = base_url + 'getfile.php?url=' + escape(url) + '&el=' + escape(el.id);
	ajax_do (getfile_url);
	return true;
}

function submit_form() {
	
	// on set les variables
	var name = document.getElementById('name').value;
	var email = document.getElementById('email').value;
	var comment = document.getElementById('comment').value; 
	
	//on envoie vers le fichier contact_forum-check.php
	url = 'contact_forum-check.php?name=' + escape(name) + '&email=' + escape(email) + '&comment=' + escape(comment);
	
	// on renvoie les résultats dans le div id result
	ajax_get (url, 'result'); 
}
</script>

<dl>
<dt>Votre nom :</dt>
<dd><input type="text" name="name" id="name" value="" size="60" /></dd>
<dt>Votre email :</dt>
<dd><input type="text" name="email" id="email" value="" size="60" /></dd>
<dt>Votre message :</dt>
<dd><textarea name="comment" id="comment" cols="90" rows="8" /></textarea></dd>
<dd><input type="button" name="Envoyer" value=" Envoyer votre message " onClick="submit_form();"><br />
<div id="result">&nbsp;</div>
</dd>
</dl>


le fichier getfile.php (ne rien modifier dans ce fichier)
Code:
<?php
// Get URL and div
if (!isset($_GET['url'])) { die(); } else { $url = $_GET['url']; }
if (!isset($_GET['el'])) { die(); } else { $el = $_GET['el']; }
// Make sure url starts with http
if (substr($url, 0, 4) != 'http') {
        // Set error
        echo 'alert(\'Security error; incorrect URL!\');';
        die();
}
// Try and get contents
$data = @file_get_contents($url);
if ($data === false) {
        // Set error
        echo 'alert(\'Unable to retrieve "' . $url . '"\');';
        die();
}
// Escape data
$data = str_replace("'", "\'", $data);
$data = str_replace('"', "'+String.fromCharCode(34)+'", $data);
$data = str_replace ("\r\n", '\n', $data);
$data = str_replace ("\r", '\n', $data);
$data = str_replace ("\n", '\n', $data);
?>
el = document.getElementById('<?php echo $el; ?>');
el.innerHTML = '<?php echo $data; ?>';


le fichier contact_forum_check.php
Code:
<?php

// date du jour
$date = date("d M Y à H:i:s");

// fonction verif format email
function CheckEmail($email_auteur){
	$motif1  = "^[[:alnum:]]([[:alnum:]\._-]{0,})[[:alnum:]]";
	$motif1 .= "@";
	$motif1 .= "[[:alnum:]]([[:alnum:]\._-]{0,})[\.]{1}([[:alpha:]]{2,})$";
	$motif2 = "[\.]{2,}";
	return (ereg($motif1, $email_auteur) && !ereg($motif2, $email));
}


if (empty($_GET['name'])) { // SI PAS DE NOM
	die ("<br/><font style=\"color:#cc0000\"><img src='no.gif' alt='' /> Veuillez entrer votre nom...</font><br/>");
}

if (empty($_GET['email'])) { // SI PAS D'EMAIL
	die ("<br/><font style=\"color:#cc0000\"><img src='no.gif' alt='' /> Veuillez entrer votre email...</font><br/>");
}

if(!CheckEmail($_GET['email'])&&($_GET['email'])){ // VERFIFE LE FORMAT DE l'EMAIL
	die ("<br/><font style=\"color:#cc0000\"><img src='no.gif' alt='' /> Le format de votre adresse e-mail n'est pas valide...</font><br/>");
}

if (empty($_GET['comment'])) { // SI PAS COMMENTAIRE
	die ("<br/><font style=\"color:#cc0000\"><img src='no.gif' alt='' /> Veuillez entrer votre message...</font><br/>");
}
// SI TOUT EST BON
	echo "<br><font style=\"color:#1A7917\"><img src='yes.gif' alt='' /> Votre email a été envoyé avec succès...<br>Nous prendrons contact avec vous dans les meilleurs délais.</font><br/>";
	$recipient = "votreemail@toto.fr";
	$subject = "Formulaire de contact";
	$mailheaders = "From: <".$_GET['email']."> \r\n";
	$mailheaders .= "Reply-To: <".$_GET['email']."> \r\n";
	$mailheaders .= "Bcc: ".$adminemail2." \r\n";
	$mailheaders .= "Return-Path: <votreemail@toto.fr> \n";
	$mailheaders .= "X-Sender: <votreemail@toto.fr> \n";
	$mailheaders .= "X-Mailer: PHP \n"; 
	$mailheaders .= "X-Priority: 1 \n"; 
	$mailheaders .= "MIME-Version: 1.0 \n"; 
	$mailheaders .= "Content-Type: text/html; charset=iso-8859-1 \n";
	$msg = "<br>\n";
	$msg .= "$date |  ".stripslashes($_GET['name'])." <br>\n";
	$msg .= " <br>\n";
	$msg .= stripslashes($_GET['comment'])." <br>\n";   
	$msg .= "<br>\n";
	$msg .= "<br>\n";
	mail($recipient, $subject, $msg, $mailheaders) or die("Impossible d'envoyer le mail...");
?>

Voilà, ca peut servir à certains.
Ca peut sembler basique à d'autres

Mais aussi ca peut pousser d'autres membres à poster des scripts tout fait en AJAX...

Xp
 
WRInaute accro
Pas mal ;)
Allez va pour ma reco, surtout que j'ai tenté de faire la même chose par moi-même et à ma grande surprise (sic) ça ne fonctionnait pas avec IE... ;)
merci
 
A
Anonymous
Guest
Il arrive que sur certains scripts AJAX, IE mette en cache.

Donc tu dois ajouter (par exemple dans le fichier contact_forum_check.php de mon exemple) :

Code:
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date du passé


Si d'autres personnes postent des scripts en AJAX, je rajouterais un script pour un formulaire d'inscription d'un forum (plus complexe) puis aussi un script intéressant qui permet de tracker online qui navigue sur son site (avec un refresh en AJAX toutes les 3 secondes - AJAX PHP MySQL)...

Xp
 
WRInaute discret
xperienss a dit:
puis aussi un script intéressant qui permet de tracker online qui navigue sur son site (avec un refresh en AJAX toutes les 3 secondes - AJAX PHP MySQL)...

Xp

la ce script m'intéresse vraiment !!!
j'etait en train de penser a un truc du genre , mais ca fesait que pour les referer.
 
A
Anonymous
Guest
netsys a dit:
J'ai pas le js activé, je fais comment pour t'écrire ? :-(

:D
Bien... tu fais pareil que si tu installes pas acrobat reader pour lire des pdf en ligne, ou voir des animations flash sans le plugin player soit installé...
donc tu fais PAS !

Plus sérieusement, en plein "Web 2", désactivé js, c'est se tirer une balle dans le pied.


Pour le script du "tracker online", je le posterai demain car il faut que je fasse le ménage dans le code...
En gros cela me permet d'afficher qui est en ligne, a quelle heure, sur quelle page, et avec quel environnement ($_SERVER["HTTP_USER_AGENT"])... tout cela en AJAX qui reload la page en GET toutes les 5 secondes (setTimeout('loop();',5000);).

Xp
 
WRInaute passionné
Bon script pour l'exemple, par contre tout ça tu pouvais le faire en javascript sans pour autant passer par ajax (je vois plus l'utilité d'ajax pour mettre à jour une partie de la page via interrogation d'un webservice, d'une BDD, ...). Mais le script reste de toute façon valable pour ce genre d'utilisation.
 
WRInaute passionné
xperienss a dit:
Plus sérieusement, en plein "Web 2", désactivé js, c'est se tirer une balle dans le pied.
Et s'il y'avait que moi ca ne serait pas bien grave, mais les stats sont formelles, entre 10 et 15 % des Internautes n'ont pas je js activé !
Ajax doit permettre un meilleur confort d'utilisation mais ne doit pas être nécessaire pour utiliser ton site. Il faut donc penser à developper des solutions alternatives...
 
A
Anonymous
Guest
@Bacteries
Je voulais simplement montrer le principe d'un formulaire en AJAX, évidement dans mon exemple un bout de code en javascript avec des fenêtres d'alerte toutes moches auraient fait l'affaire...
Je voulais aussi faire passer l'idée qu'AJAX c'est pas aussi complexe que cela.

Dans le fichier contact_forum_check.php, on peut passer les vérifications que l'on veut (et des requètes sur une BDD si nécessaire).


@netsys
D'accord avec toi sur le principe d'utilisation d'AJAX.
Pour exemple sur mon forum, j'ai un formulaire d'inscription en AJAX et pour ceux chez qui cela ne marche pas (js désactivé), un formulaire tout bête en PHP.
Résultat sur les derniers mois, personne n'a utilisé celui en PHP... donc... pour mon site, AJAX ca marche bien car j'ai entre 50 / 70 inscrits /jour.




Xp :wink:
 
WRInaute discret
Salut,

Merci pour ta contribution,

Par contre, ce que j'attend d'un poste comme celui-ci, c'est surtout les commentaires du code javascript... car le php ici, je pense que tout le monde maitrise... et c'est bien la le probleme avec l'ajax.


En tout cas merci de ta contrib' si qqun ou toi pouvais commenter un peu le js... serais bien utile :)
 
Nouveau WRInaute
Une petite question SVP Monsieur

Bonjour
Le PHP ainsi que le Javascript étant pour moi Terrae Incognitae je me pose ces questions :
- si on veut rajouter des champs à ce formulaire ce sont les lignes seules
Code:
   // on set les variables
   var name = document.getElementById('name').value;
   var email = document.getElementById('email').value;
   var comment = document.getElementById('comment').value;
qu'il faut renseigner ?
- il y a des balises <br> et d'autres <br/> : c'est à cause du PHP ?
Si je veux les mettre en conformité avec la page que suis en train de réaliser (XHTML 1.1) puis je les passer en <br /> ? Et dois je prendre des précautions ?

J'espère sincèrement vous avoir bien fait rire avec mes questions.
Un bon rire valant un bon bifteck dit-on vous n'aurez rien perdu. :)
 
Nouveau WRInaute
xperienss a dit:
Bonjour à tous,

Dans la lignée du post d'Olivier sur la programmation en AJAX pour les titres des sujets d'un forum, je vous soumets un exemple basique de dév d'un formulaire en AJAX



il ne manque que les petits gifs tempo que font toute la classe des scripts web 2.0 ajax :)
 
WRInaute passionné
Je n'ai peut-être pas tout compris, mais cette page demande de ne pas envoyer de CV alors que la page d'accueil invite à faire le contraire.
Sinon, bon script, et astuce intéressante pour les problèmes de cache, que je rencontre effectivement.
 
A
Anonymous
Guest
Jeviensderio a dit:
Je n'ai peut-être pas tout compris, mais cette page demande de ne pas envoyer de CV alors que la page d'accueil invite à faire le contraire.

Hum la page d'accueil propose d'enregistrer son CV dans un module "CV en ligne", la page de contact demande de ne pas envoyer son CV car le module "CV en ligne" est fait pour ca...

:wink:
 
A
Anonymous
Guest
Sventovit a dit:
Pour moi le script n'est pas bon.

nb : tout cela testé avec FF 2

Le formulaire a été testé sur tous les navigateurs récents, pas de soucis pour moi. Sur mon site il est quotidiennement utilisé.
J'ai posté plusieurs scripts AJAX sur WRI, si tu veux améliorer celui la et faire du OnBlur au lieu du OnCLick, tout est possible.
A toi de mettre les mains dans le code.

Mais de là à dire que le script n'est pas bon...

Bref! No more coment!

Xp
 
Nouveau WRInaute
Réponse à Sventovit (bas de page 1, j'avais pas vu qu'il y en avait 2, désolé...)

Non, les lignes
Code:
var machin = document.getElementById("trucmuche").value
servent à récupérer les valeurs du formulaire. Donc il faut en + ajouter des Input en changeant l'ID, ainsi que la partie traîtement que est efféctuée sur les variables.

ensuite, il faut tout le temps mettre <br /> (avec espace pour la compatibilité), c'est la nouvelle règle du XHTML depuis 1 ou 2 ans déjà... Le reste, c'est des erreurs, il faut mettre le slash dans tous les cas.

Pour le rire, ya pas de quoi, je suis végétarien... Et puis de toute façon, j'ai appris le javascript en regardant dans les fichiers qui définissent l'interface des dossiers sous winbeurk (fichiers à droite, infos à gauche, etc), donc c'est pas génial non plus lol.
 
WRInaute discret
Bonjour,

Très bien le script, cependant pas de problème sous ie ça marche, mais sous FireFox 2 ça ne fonctionne pas. Pourtant js est activé... une idée ? MERCI !
 
WRInaute occasionnel
Bonjour,

je viens de contacter l'auteur et je pose également la question ici. Quelles sont les modifications à faire pour faire apparaitre les erreurs à côté de chaque zone de texte ?
 
A
Anonymous
Guest
Bonjour,

Je remets a jour mon script que j'ai un peu modifié
Il manque la CSS sur les exemples ci dessous.
Tous les vérifications sont faites en javascript (contact.js) puis seul l'envoi de l'email est fait en ajax (contact-check.php).

Voilà; j'ai un peu commenté le script, mais il est assez simple d'utilisation pour un développeur...

le fichier contact.php:
Code:
<script type="text/javascript" src="contact.js"></script>
<dl>
<dt>Votre nom &nbsp;&nbsp;<div id="namebox" style="display:inline;"><font class='maj job bold size10'>|Obligatoire|</font></div></dt>
<dd><input type="text" name="name" id="name" value="" size="60" /></dd>
<dt>Votre société </dt>
<dd><input type="text" name="societe" id="societe" value="" size="60" /></dd>
<dt>Votre email &nbsp;&nbsp;<div id="emailbox" style="display:inline;"><font class='maj job bold size10'>|Obligatoire|</font></div></dt>
<dd><input type="text" name="email" id="email" value="" size="60" /></dd>
<dt>Votre message &nbsp;&nbsp;<div id="commentbox" style="display:inline;"><font class='maj job bold size10'>|Obligatoire|</font></div></dt>
<dd><textarea name="comment" id="comment" cols="90" rows="8" /></textarea></dd>
<dd><input type="button" name="Envoyer" value=" Envoyer votre message " class="submit" onClick="valeurCheck()">
<div id="result" style="display:inline;"> </div></dd>
</dl>

le fichier contact.js:
Code:
// Get base url
url = document.location.href;
xend = url.lastIndexOf("/") + 1;
var base_url = url.substring(0, xend);
var ajax_get_error = false;
function ajax_do (url) {
	// Does URL begin with http?
	if (url.substring(0, 4) != 'http') {
		url = base_url + url;
	}
	// Create new JS element
	var jsel = document.createElement('SCRIPT');
	jsel.type = 'text/javascript';
	jsel.src = url;
	// Append JS element (therefore executing the 'AJAX' call)
	document.body.appendChild (jsel);
	return true;
}
function ajax_get (url, el) {
	// Has element been passed as object or id-string?
	if (typeof(el) == 'string') {
		el = document.getElementById(el);
	}
	// Valid el?
	if (el == null) { return false; }
	// Does URL begin with http?
	if (url.substring(0, 4) != 'http') {
		url = base_url + url;
	}
	// Create getfile URL
	getfile_url = base_url + 'getfile.php?url=' + escape(url) + '&el=' + escape(el.id);
	// Do Ajax
	ajax_do (getfile_url);
	return true;
}

function validEmail(email) { // VERIFICATION DE LA SYNTHAXE DE L'EMAIL
	invalidChars = "/:,;~"
	// verifie qu'il n'y a pas de caracteres pas autorises
	for (i=0; i<invalidChars.length; i++) {
	badChar = invalidChars.charAt(i)
	if (email.indexOf(badChar,0) > -1) {
	return false
	}
	}
	// verifie qu'il y a un @
	atPos = email.indexOf("@",1)
	if (atPos == -1) {
	return false
	}
	// et seulement un @
	if (email.indexOf("@", atPos+1) != -1) {
	return false
	}
	// et au moins un point apres le @
	periodPos = email.indexOf(".",atPos)
	if (periodPos == -1) {
	return false
	}
	//verifie qu'il y a au moins un caractère entre le @ et le .
	if (periodPos - atPos < 2) {
	return false
	}
	//verifie qu'il y a au moins deux caracteres apres le point
	if (periodPos+3 > email.length) {
	return false
	}
	return true
}

function valeurCheck() {
	var name = document.getElementById('name').value;
	var email = document.getElementById('email').value;
	var comment = document.getElementById('comment').value; 
	var societe = document.getElementById('societe').value; 
	
	// CHECK MESSAGE -- on commence par en bas pour que le onfocus replace la page au bon niveau d'erreur
	if(comment == "" ){ // si champ comment vide
		document.getElementById('comment').focus(); // focus dans le champ
		document.getElementById('comment').style.border = '1px solid #D41919'; // on change la couleur du border du INPUT
		document.getElementById('commentbox').innerHTML = '<font style="color:#cc0000"><img src="images\/no.gif" alt="" \/> Veuillez entrer votre message.<\/font>'; // on affichage le message dans le div ID
	}else{ // si champ comment rempli
		document.getElementById('comment').style.border = '1px solid #CFD8E0'; // on remet la couleur du border du INPUT
		document.getElementById('commentbox').innerHTML = '&nbsp;<img src="images\/yes.gif" alt="" \/>'; // on affiche une image OK
	}
	
	// CHECK EMAIL
	 if(email == "" ){
		document.getElementById('email').focus();
		document.getElementById('email').style.border = '1px solid #D41919';
		document.getElementById('emailbox').innerHTML = '<font style="color:#cc0000"><img src="images\/no.gif" alt="" \/> Veuillez entrer votre email.<\/font>';
	}else if (!validEmail(email)) {
		document.getElementById('email').focus();
		document.getElementById('email').select();
		document.getElementById('email').style.border = '1px solid #D41919';
		document.getElementById('emailbox').innerHTML = '&nbsp;<img src="images\/no.gif" alt="" \/> <font color="#FD1813">Votre email n\'est pas valide<\/font>';
	}else{
		document.getElementById('email').style.border = '1px solid #CFD8E0';
		document.getElementById('emailbox').innerHTML = '&nbsp;<img src="images\/yes.gif" alt="" \/>';
	}
	
	// CHECK NOM
	if(name == "" ){
		document.getElementById('name').focus();
		document.getElementById('name').style.border = '1px solid #D41919';
		document.getElementById('namebox').innerHTML = '<font style="color:#cc0000"><img src="images\/no.gif" alt="" \/> Veuillez entrer votre nom.<\/font>';
	}else{
		document.getElementById('name').style.border = '1px solid #CFD8E0';
		document.getElementById('namebox').innerHTML = '&nbsp;<img src="images\/yes.gif" alt="" \/>';
	}
	
	// CHECK FINAL
	if ( (name == "") || (email == "") || (!validEmail(email) )|| (comment == "") ) {
		return false;
	}
	
	url = 'contact-check.php?name=' + escape(name) + '&email=' + escape(email) + '&societe=' + escape(societe) + '&comment=' + escape(comment);
	ajax_get (url, 'result');
}


le fichier contact-check.php:
Code:
<?php
include "conf.php";
// INTERDIRE LE CACHE IE
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
// ENCODAGE
header("Content-Type: text/html; charset=iso-8859-1");

$date = date("d M Y à H:i:s");

//pour éviter les injections
if (eregi("\r",$_GET['email']) || eregi("\n",$_GET['email'])){
	$email = "";
}else{
	$email = $_GET['email'];
}

$recipient = "votreemail@email.fr";
$subject = "Formulaire de contact";
$mailheaders = "From: <".$email."> \r\n";
$mailheaders .= "Reply-To: <".$email."> \r\n";
$mailheaders .= "Bcc: ".$adminemail2." \r\n";
$mailheaders .= "Return-Path: <".$adminemail."> \n";
$mailheaders .= "X-Sender: <".$adminemail."> \n";
$mailheaders .= "X-Mailer: PHP \n"; 
$mailheaders .= "X-Priority: 1 \n"; 
$mailheaders .= "MIME-Version: 1.0 \n"; 
$mailheaders .= "Content-Type: text/html; charset=iso-8859-1 \n";
$msg = " <br>\n";
$msg .= "$date |  ".htmlspecialchars(stripslashes($_GET['name']))." ".htmlspecialchars(stripslashes($_GET['societe']))." <br>\n";
$msg .= " <br>\n";
$msg .= htmlspecialchars(stripslashes($_GET['comment']))." <br>\n";   
$msg .= " <br>\n";
$msg .= " <br>\n";
mail($recipient, $subject, $msg, $mailheaders) or die("Impossible d'envoyer le mail...");

// on renvoie le message de confirmation...
echo "<br><font style=\"color:#1A7917; line-height:13px;\"><img src='/images/yes.gif' alt='' /> Votre email a été envoyé avec succès...<br/>Nous prendrons contact avec vous dans les meilleurs délais.</font><br>";
	
?>


le fichier getfile.php:
Code:
<?php
// Get URL and div
if (!isset($_GET['url'])) { die(); } else { $url = $_GET['url']; }
if (!isset($_GET['el'])) { die(); } else { $el = $_GET['el']; }
// Make sure url starts with http
if (substr($url, 0, 4) != 'http') {
        // Set error
        echo 'alert(\'Security error; incorrect URL!\');';
        die();
}
// Try and get contents
$data = @file_get_contents($url);
if ($data === false) {
        // Set error
        echo 'alert(\'Unable to retrieve "' . $url . '"\');';
        die();
}
// Escape data
$data = str_replace("'", "\'", $data);
$data = str_replace('"', "'+String.fromCharCode(34)+'", $data);
$data = str_replace ("\r\n", '\n', $data);
$data = str_replace ("\r", '\n', $data);
$data = str_replace ("\n", '\n', $data);
?>
el = document.getElementById('<?php echo $el; ?>');
el.innerHTML = '<?php echo $data; ?>';
 
WRInaute occasionnel
Bonjour
juste une petite question
j'ai essayé d'ajouter une option qui me permettera que recuperer l'ip de la personne qui a envoyer le message
j'ai ajouter un
Code:
$ip = getenv("REMOTE_ADDR");


$mailheaders .= "IP : ".$ip."\n";

seulement ca me donen l'ip du serveur , pas l'ip du visiteur!

quelqu'un a une idée?
 
WRInaute discret
Voici une routine que j'utilisais pour récupérer l'adresse IP en utilisant les variables d'environnement fournies par PHP :

Code:
function get_ip(){
	// On prend l' adresse IP de la meilleur façon possible
	if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){
		$ip_simple = $_SERVER['HTTP_X_FORWARDED_FOR'];
	}elseif(isset($_SERVER['HTTP_CLIENT_IP'])){
		$ip_simple = $_SERVER['HTTP_CLIENT_IP'];
	}else{
		$ip_simple = $_SERVER['REMOTE_ADDR'];
	}
	return $ip_simple;
}

Si cela peut t'être utile..
 
WRInaute occasionnel
Merci tom_pascal
le problem c'est que la variable doit etre dans contact-check.php
et que cette page est apeler par la page contact , ce qui fais que j'aurai toujours l'ip du serveur

quelqu'un a une idée ou une solution?
 
WRInaute discret
Euh, non en théorie en ajax, l'appel d'une page PHP qui renvoit du JS est elle-même initiée par du JS à la base, donc du côté client... donc tu devrais récupérer l'adresse du client à l'origine de cette requête.
 
A
Anonymous
Guest
Salut !

Pourquoi tu ne récupères pas l'IP dans la page contact.php ($ip = getenv("REMOTE_ADDR"); ) et tu la passes dans le contact.js dans la fonction function valeurCheck() {

contact.js (je n'ai repris que la fonction valeurCheck()
Code:
function valeurCheck() {
   var name = document.getElementById('name').value;
   var email = document.getElementById('email').value;
   var comment = document.getElementById('comment').value;
   var societe = document.getElementById('societe').value;
   var ip = document.getElementById('ip').value;
   
   // CHECK MESSAGE -- on commence par en bas pour que le onfocus replace la page au bon niveau d'erreur
   if(comment == "" ){ // si champ comment vide
      document.getElementById('comment').focus(); // focus dans le champ
      document.getElementById('comment').style.border = '1px solid #D41919'; // on change la couleur du border du INPUT
      document.getElementById('commentbox').innerHTML = '<font style="color:#cc0000"><img src="images\/no.gif" alt="" \/> Veuillez entrer votre message.<\/font>'; // on affichage le message dans le div ID
   }else{ // si champ comment rempli
      document.getElementById('comment').style.border = '1px solid #CFD8E0'; // on remet la couleur du border du INPUT
      document.getElementById('commentbox').innerHTML = '&nbsp;<img src="images\/yes.gif" alt="" \/>'; // on affiche une image OK
   }
   
   // CHECK EMAIL
    if(email == "" ){
      document.getElementById('email').focus();
      document.getElementById('email').style.border = '1px solid #D41919';
      document.getElementById('emailbox').innerHTML = '<font style="color:#cc0000"><img src="images\/no.gif" alt="" \/> Veuillez entrer votre email.<\/font>';
   }else if (!validEmail(email)) {
      document.getElementById('email').focus();
      document.getElementById('email').select();
      document.getElementById('email').style.border = '1px solid #D41919';
      document.getElementById('emailbox').innerHTML = '&nbsp;<img src="images\/no.gif" alt="" \/> <font color="#FD1813">Votre email n\'est pas valide<\/font>';
   }else{
      document.getElementById('email').style.border = '1px solid #CFD8E0';
      document.getElementById('emailbox').innerHTML = '&nbsp;<img src="images\/yes.gif" alt="" \/>';
   }
   
   // CHECK NOM
   if(name == "" ){
      document.getElementById('name').focus();
      document.getElementById('name').style.border = '1px solid #D41919';
      document.getElementById('namebox').innerHTML = '<font style="color:#cc0000"><img src="images\/no.gif" alt="" \/> Veuillez entrer votre nom.<\/font>';
   }else{
      document.getElementById('name').style.border = '1px solid #CFD8E0';
      document.getElementById('namebox').innerHTML = '&nbsp;<img src="images\/yes.gif" alt="" \/>';
   }
   
   // CHECK FINAL
   if ( (name == "") || (email == "") || (!validEmail(email) )|| (comment == "") ) {
      return false;
   }
   
   url = 'contact-check.php?name=' + escape(name) + '&email=' + escape(email) + '&societe=' + escape(societe) + '&comment=' + escape(comment) + '&ip=' + escape(ip);
   ajax_get (url, 'result');
}


contact.php
Code:
<?php
$ip = getenv("REMOTE_ADDR");
?>
<script type="text/javascript" src="contact.js"></script>
<dl>
<dt>Votre nom &nbsp;&nbsp;<div id="namebox" style="display:inline;"><font class='maj job bold size10'>|Obligatoire|</font></div></dt>
<dd><input type="text" name="name" id="name" value="" size="60" /></dd>
<dt>Votre société </dt>
<dd><input type="text" name="societe" id="societe" value="" size="60" /></dd>
<dt>Votre email &nbsp;&nbsp;<div id="emailbox" style="display:inline;"><font class='maj job bold size10'>|Obligatoire|</font></div></dt>
<dd><input type="text" name="email" id="email" value="" size="60" /></dd>
<dt>Votre message &nbsp;&nbsp;<div id="commentbox" style="display:inline;"><font class='maj job bold size10'>|Obligatoire|</font></div></dt>
<dd><textarea name="comment" id="comment" cols="90" rows="8" /></textarea></dd>
<dd><input type="button" name="Envoyer" value=" Envoyer votre message " class="submit" onClick="valeurCheck()">
<input type="hidden" name="ip" id="ip" value="<?php echo $ip; ?>" />
<div id="result" style="display:inline;"> </div></dd>
</dl>


contact-check.php
Code:
<?php
include "conf.php";
// INTERDIRE LE CACHE IE
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
// ENCODAGE
header("Content-Type: text/html; charset=iso-8859-1");

$date = date("d M Y à H:i:s");

//pour éviter les injections
if (eregi("\r",$_GET['email']) || eregi("\n",$_GET['email'])){
   $email = "";
}else{
   $email = $_GET['email'];
}

$recipient = "votreemail@email.fr";
$subject = "Formulaire de contact";
$mailheaders = "From: <".$email."> \r\n";
$mailheaders .= "Reply-To: <".$email."> \r\n";
$mailheaders .= "Bcc: ".$adminemail2." \r\n";
$mailheaders .= "Return-Path: <".$adminemail."> \n";
$mailheaders .= "X-Sender: <".$adminemail."> \n";
$mailheaders .= "X-Mailer: PHP \n";
$mailheaders .= "X-Priority: 1 \n";
$mailheaders .= "MIME-Version: 1.0 \n";
$mailheaders .= "Content-Type: text/html; charset=iso-8859-1 \n";
$msg = " <br>\n";
$msg .= "$date |  ".htmlspecialchars(stripslashes($_GET['name']))." ".htmlspecialchars(stripslashes($_GET['societe']))." ".htmlspecialchars(stripslashes($_GET['ip']))." <br>\n";
$msg .= " <br>\n";
$msg .= htmlspecialchars(stripslashes($_GET['comment']))." <br>\n";   
$msg .= " <br>\n";
$msg .= " <br>\n";
mail($recipient, $subject, $msg, $mailheaders) or die("Impossible d'envoyer le mail...");

// on renvoie le message de confirmation...
echo "<br><font style=\"color:#1A7917; line-height:13px;\"><img src='/images/yes.gif' alt='' /> Votre email a été envoyé avec succès...<br/>Nous prendrons contact avec vous dans les meilleurs délais.</font><br>";
?>
 
WRInaute occasionnel
Bonjour
depuis une erreur on obtien une erreur quand on utilise le formail
contactpd2.jpg

pourtant j'ai rien modifier
quelqu'un a une idée?
 
Nouveau WRInaute
Bonjour,

Je suis tombé sur ce fil en cherchant les mots clé suivant dans google "contact formulaire ajax", et je trouve le script très chouette. J'ai juste rencontré un petit problème :

Le email que je recevais n'était pas affiché correctement, j'avais le header dans le corps du email. La solution a été de modifier le fichier contact-check.php de la manière suivante

Code:
$mailheaders = "From: <".$email."> \n";
$mailheaders .= "Reply-To: <".$email."> \n";
$mailheaders .= "Bcc: ".$adminemail2." \n";
$mailheaders .= "Return-Path: <".$adminemail."> \n";
$mailheaders .= "X-Sender: <".$adminemail."> \n";
$mailheaders .= "X-Mailer: PHP \n";
$mailheaders .= "X-Priority: 1 \n";
$mailheaders .= "MIME-Version: 1.0 \n";
$mailheaders .= "Content-Type: text/html; charset=iso-8859-1 \n";# Mime type

en fait je ne sais pas si c'est le fait de remplacer \r\n par \n ou bien si j'avais oublié de mettre un espace avant \n qui a résolu le problème.

La deuxième remarque concerne la mise en page du email qui supprimait les retours à la ligne et mettait tout en un gros bloc, la solution a été de modifier la ligne suivante :
Code:
$msg .= htmlspecialchars(stripslashes($_GET['comment']))." <br>\n";

en

Code:
$msg .= nl2br(htmlspecialchars(stripslashes($_GET['comment'])))." <br>\n";

Voila j'espère que cela pourra servir.

Gil Bourgeois
 
Discussions similaires
Haut