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

[xperienss]

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: Tout sélectionner

<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: Tout sélectionner

<?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: Tout sélectionner

<?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...");
?>


Le résultat:
-http://www.compta-online.com/contact_forum.php (sans les bulles "tooltips" que je n'ai pas ajouté pour ne pas compliquer le script)....


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

[TOMHTML]

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

[xperienss]

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: Tout sélectionner

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

[xgamer]

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.

[netsys]

J'ai pas le js activé, je fais comment pour t'écrire ?

[xperienss]

J'ai pas le js activé, je fais comment pour t'écrire ?

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

[xgamer]

trop bien,
je languit !

[Bacteries]

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.

[netsys]

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...

[xperienss]

@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

[zim'']

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

[Monty973]

Le résultat:
-http://www.compta-online.com/contact_forum.php (sans les bulles "tooltips" que je n'ai pas ajouté pour ne pas compliquer le script).

Les tooltips (les mêmes) sont disponibles ici pour ceux que cela intéressent :
http://www.dhtmlgoodies.com/scripts/for ... oltip.html

un autre lien intéressant :
http://209.85.129.104/search?q=cache:Fv ... t+(url,+el)+%7B%22&hl=en&ct=clnk&cd=1

[xperienss]

J'ai posté un second script AJAX ici : http://www.webrankinfo.com/forums/viewtopic_64406.htm

[xperienss]

Et un troisième script ici :
http://www.webrankinfo.com/forums/viewtopic_64505.htm
(affichage d'une liste de produits)

[Sventovit]

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: Tout sélectionner

   // 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.