Tuto publié par Dans un premier temps, nous validerons les données issues du formulaire par un script PHP pour la vérification côté serveur. Nous validerons ensuite les données côté client avec Jquery, et nous verrons comment utiliser la méthode $.ajax de Jquery afin de traiter les données en AJAX, c'est à dire insérer les informations en base de données, envoyer un email pour recevoir le message de notre contact, et cela sans rechargement de page.
Nous verrons également comment créer quelques effets sympathiques, comme par exemple l'apparition d'un loader avant l'envoi des données, la disparition du formulaire une fois les données traitées et l'affichage d'un message de succès.
Jetez un oeil à ces autres tuto jQuery, Ajax
Aller plus loin avec les notions…
Approfondissez vos connaissances en jQuery jQuery est une librairie…
$.fn.version
Il est important de ne jamais oublier la version avec laquelle…
Cohabitation avec d'autres…
Souvent, vous pouvez être amené à utiliser jQuery sur des…
removeAll et (function(){})()…
Voyez d'autres possibilités autour de la gestion des conflits…
Créer une bannière animée…
Dans ce tuto vidéo, vous découvrirez comment créer une bannière…
Styliser un formulaire avec…
Dans ce tuto CSS et Jquery, nous verrons comment styliser…
Système de commentaires avancé…
Dans ce tuto PHP en vidéo, nous verrons comment réaliser…
Système de vote façon YouTube…
Dans ce tuto AJAX en vidéo, vous apprendrez à réaliser un…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery, Ajax de 30 minutes est proposée dans une résolution plus grande que l’extrait suivant :
simpledev
, formateur certifié
Toutes les formations de Simpledev
Témoignage des clients de simpledev
Tutoriel clair et précis. Continuez ainsi :)
Tuto sur le codeigniter excellent par contre existe t il un tuto sur la création d'un back office avec codeigniter. Si oui, je suis fortement intéressée...
Superbes tutos pour apprendre Laravel ! Continue comme ça :D
Merci beaucoup pour tes tutorial que j'adore :D
Très bon formateur de bonne qualité. J'aime.
Lire les autres témoignages
D'autres tuto de simpledev
Effacer des données grâce à AJAX et Jquery
Dans ce tuto Codeigniter en vidéo, nous verrons comment effacer des données issues…
Effacer des données en AJAX avec PHP MySQL et Jquery
Dans ce tuto AJAX en vidéo, nous verrons comment effacer des données d'une table MySQL…
PHP POO cas pratique pour débutant, formulaire de contact
Dans ce tuto PHP en vidéo pour débutants en POO, nous verrons dans un cas pratique…
Cloudigniter
Dans ce tuto, je vous présenterai Cloudigniter une solution d'hébergement gratuite…
Notes attribuées par les utilisateurs (20 votes)
Les avis / Questions des utilisateurs (34)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto jQuery, Ajax d’une durée de 30 minutes a été acheté 323 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 29 novembre 2010 par simpledev, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,4/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto jQuery Formulaire.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.
Choisissez parmi tuto classés dans nos 236 logiciels ou langages informatiques.
(a acheté ce tuto - 05 octobre 2012)
" Salut,
Je vien de remettre en place le script du formulaire, il fonctionne mais je reçois systématiquement les mails en double, et les inscriptions en base se font en double aussi,.
J'ai eu beau relire tout le code, je ne vois pas d'ou cela peut venir...
Aurais tu une idée comme ça a chaud?
Merci? "
(a acheté ce tuto - 20 septembre 2012)
" ... rien à redire, tuto clair et précis, manque juste peut-être la fonction pour vider les champs une fois que le formulaire a été envoyé et que j'ai pu trouver à cette adresse: http://www.learningjquery.com/2007/08/clearing-form-data "
(a acheté ce tuto - 10 septembre 2012)
" tuto clair et concis, je vias teste rcehz moi pour voie si ca fonctionne ^^
Merci "
(a acheté ce tuto - 05 août 2012)
" Parfait !! Très clair comme cours avec pas mal de petites subtilités. Merci "
(a acheté ce tuto - 18 janvier 2012)
" Bonjour simpledev.
Ce tuto m'intéresse beaucoup. J'ai peur de me lancer et d'être bloquer à la fin.
J'héberge sur OVH et j'ai vue quelques commentaires disant que cela posais quelques problème.
Qu'en est-il ?
Merci "
(a acheté ce tuto - 11 janvier 2012)
" super tuto tres bien explique
merci "
(a acheté ce tuto - 19 décembre 2011)
" trés bien "
(a acheté ce tuto - 25 octobre 2011)
" superce que je cherchais :) "
(a acheté ce tuto - 18 octobre 2011)
" Toujours super les formations de Simpledev. Un vrai régal! Parfois un peu vite sur certains points, mais on comprend assez rapidement en pratiquant. Merci! "
(a acheté ce tuto - 23 septembre 2011)
" super !
j'ai (le crois avoir) compris !! "
(a acheté ce tuto - 15 septembre 2011)
" très bon tuto "
(a acheté ce tuto - 04 septembre 2011)
" Bonjour. Merci pour cette formation, cependant je m'interroge comme certains : comment expliquer le fait que ce formulaire ne fonctionne pas avec OVH. Je l'ai vérifié en local, il fonctionne, mais lorsque je l'héberge, le formulaire s'affiche comme envoyé, mais aucun mail n'est reçu. "
(a acheté ce tuto - 06 août 2011)
" Je ne travail pas en local, j'ai mis mon site en ligne. Tout est hébergé sous OVH, j'ai lu dans les commentaires que cela pouvait poser un problème ?
Les messages d'erreur sont les informations qui s'affichent quand on ne remplit pas correctement un champ du formulaire. Dans un premier temps dans la vidéo, quand on clique sur envoyer avec un champ vide, on est renvoyé sur une page blanche avec l'erreur en haut.
Ensuite, les messages s'affichent en rouge directement dans le formulaire. C'est cette étape que je n'arrive pas à franchir. "
(auteur de ce tuto - 06 août 2011)
" @madaniso
Salut,
Est ce que tu as configuré correctement ton fichier php.ini pour l'envoi de mail en local (si tu bosses en local) ?
Pour les erreurs je vois pas trop de quoi tu parles là comme ça. "
(a acheté ce tuto - 05 août 2011)
" Bonjour, merci pour ce très bon tuto, mais j'ai malgré tout deux problèmes.
D'abord j'ai configurer une base de données pour mes mails, mais je rien sur ma boîte mail. J'ai tout bien vérifié, mes identifiants, etc...
Le second problème est moins grave, les messages d'erreurs si on ne remplit pas correctement le formulaire reste comme au début de la vidéo (sans mise en forme sur une page banche). J'ai regardé plusieurs fois le passage entre ces deux états, mais ça ne marche toujours pas.
Merci "
(a acheté ce tuto - 30 juin 2011)
" Je me suis finalement débrouiller seul et à présent tout fonctionne à merveille!
Merci pour ce tuto !! "
(a acheté ce tuto - 30 juin 2011)
" sympa merci ! "
(a acheté ce tuto - 23 juin 2011)
" Oui, j'ai bien vérifié.
Puis je t'envoyer mon fichier contact.php par mail (pour éviter d'encombrer cette page) ?
Merci beaucoup "
(auteur de ce tuto - 23 juin 2011)
" Est ce que tu as regardé dans ton spam de boîte mail ? (au cas où) "
(a acheté ce tuto - 21 juin 2011)
" J'avance à petit pas ! J'ai fait une petite modif pour accéder à ma base. Je n'ai plus d'erreur et ma base de donnée reçois bien mes mails (sur mon hebergeur), mais par contre je ne les reçois toujours pas sur ma boite Gmail ?! Je ne comprend pas pourquoi.. "
(a acheté ce tuto - 21 juin 2011)
" Je viens de contacter mon hébergeur (lws) et apparemment l'extension PDO est bel et bien activé... mizère :-( Mon formulaire ne fonctionne toujours pas en ligne. Je dois faire une erreur de débutant mais je n'arrive pas à cerner le problème. "
(auteur de ce tuto - 20 juin 2011)
" L'extension PDO n'est pas activée chez ton hébergeur, il doit surement être en PHP4. Contact les ils pourront peut-être te dire comment faire, d'autre ont eu ce problème chez l'hébergeur 1&1;et en général il te fournissent un bout de code à insérer pour régler le problème. "
(a acheté ce tuto - 20 juin 2011)
" Voici mon message d'erreur:
Fatal error: Uncaught exception 'PDOException' with message 'SQLSTATE[28000] [1045] Access denied for user 'root'@'193.37.145.89' (using password: YES)' in /var/www/neimad.fr/htdocs/contact.php:14 Stack trace: #0 /var/www/neimad.fr/htdocs/contact.php(14): PDO->__construct('mysql:host=193....', 'root', 'monmotdepasse') #1 {main} thrown in /var/www/neimad.fr/htdocs/contact.php on line 14
Merci beaucoup. "
(auteur de ce tuto - 20 juin 2011)
" Est ce que ton hébergeur utilise PHP5, si il est encore en PHP4 c'est normal que tu aies un message d'erreur en utilsant PDO. Pour l'envoi d'email, assures toi que la fonction mail est activée chez eux, en général elle est désactivée sur chez les hébergeurs gratuits.
Quel est ton message d'erreur? "
(a acheté ce tuto - 20 juin 2011)
" Oui merci ! tout fonctionne parfaitement en local... mais par contre, sur mon serveur, j'ai encore un message d'erreur.
Voici ce que j'ai mis dans mon contact.php:
('mysql:host=Adresse du serveur;dbname=Nom de la base Mysql', 'root', 'mon mot de passe')
Je me trompe quelque par mais je n'arrive pas à poser le doigts sur mon problème. "
(auteur de ce tuto - 20 juin 2011)
" Un petit tuto : http://fr.tuto.com/wampserveur/envoi-de-mail-en-local-wampserveur,8523.html
Tout est expliqué:) "
(a acheté ce tuto - 20 juin 2011)
" Non, je n'ai pas vu passer le fichier php.ini ?!
Où se trouve t' il ?
Merci beaucoup :-) "
(auteur de ce tuto - 20 juin 2011)
" Bonjour,
Est ce que tu as bien configuré le fichier php.ini avec les bons paramètres pour envoyer des emails? "
(a acheté ce tuto - 20 juin 2011)
" Bonjour et merci beaucoup pour ce tuto !
Par contre, j'ai un petit soucis quand j'envoie un mail sur ma boite... mon email n'arrive jamais à destination ! J'ai vérifier dans ma table Mysql et par contre, mes messages y sont stockés!
Est ce que quelqu'un pourrait éclairer ma lanterne?
Merci beaucoup "
(a acheté ce tuto - 02 mars 2011)
" merci beaucoup très bon tutorial "
(a acheté ce tuto - 16 février 2011)
" Bon tuto, malheureusement, pour la partie traitement et envoi d'emails, cela ne fonctionne pas sur certains hébergeur tel que OVH. Par contre, il fonctionne très bien en local... Si vous avez une explication, je suis preneur ! Merci "
(a acheté ce tuto - 09 janvier 2011)
" petit commentaire juste pour savoir et comprendre à quoi sert exactement le fait d'ajaxiser les variables si ensuite tu ne t'en sert pas dans la page contact.php ? "
(auteur de ce tuto - 29 novembre 2010)
" C'est rectifié, j'ai mis les bons fichiers:) "
(a acheté ce tuto - 29 novembre 2010)
" Comme d'hab ... très bon tuto :)
Par contre, petit problème dans les fichiers sources.
Est disponible le dossier "ajax_signup" alors que le tuto porte sur le dossier "ajax_contact" ^^
Bonne continuation dans tes tutos que je suis avec intérêt :) "