Share
Précédemment sur Nettuts +, Philo a montré comment utiliser jQuery pour ajouter une validation de formulaire à des commentaires wordpress fonctionnant sans rechargement de page. Un autre excellent moyen d’utiliser JQuery pour améliorer l’expérience utilisateur est non seulement de valider, mais de soumettre votre formulaire entièrement sans actualisation de la page..
Dans ce tutoriel, je vais vous montrer à quel point il est facile de le faire - envoyez un formulaire de contact qui envoie un courrier électronique, sans actualisation de la page à l'aide de jQuery! (L'email réel est envoyé avec un script php qui traite en arrière-plan). Commençons.
Si vous souhaitez une solution prête à l'emploi, essayez le formulaire de contact Ultimate PHP, HTML5 & AJAX ou parcourez les autres scripts de formulaire en vente sur Envato Market..
Formulaires et plugins en vente sur le marché Envato Dans cet exemple, nous avons un formulaire de contact simple avec nom, email et numéro de téléphone. Le formulaire soumet tous les champs à un script php sans actualisation de page, à l'aide de fonctions jQuery natives (signification native, vous n'avez pas besoin de télécharger de plug-in supplémentaire pour le faire fonctionner.).
Si vous avez trouvé cet article sans aucune connaissance préalable de jQuery, un bon point de départ pour commencer serait l'article de Jeffrey Way sur 15 ressources pour bien démarrer avec jQuery From Scratch..
Jetons un coup d'oeil à notre balisage HTML. Nous commençons avec notre formulaire HTML de base:
Vous remarquerez peut-être que j'ai inclus un div avec id contact_form qui enveloppe tout le formulaire.
Assurez-vous de ne pas manquer cette section dans votre propre forme, car nous aurons besoin de cette division plus tard. Vous
vous remarquerez peut-être également que j'ai laissé vides les parties action et méthode de la balise de formulaire. nous
En fait, vous n'avez besoin ni de l'un ni de l'autre, car jQuery s'occupe de tout plus tard.
Une autre chose importante à inclure est la valeur id pour chaque champ de saisie. Les valeurs id
sont ce que votre script jQuery recherchera pour traiter le formulaire avec.
J'ai ajouté des styles CSS et une image d'arrière-plan dans Photoshop pour créer le formulaire suivant:
La prochaine étape du processus consiste à ajouter du code jQuery. Je suppose que vous avez téléchargé jQuery, téléchargé sur votre serveur et que vous le référencez dans votre page Web..
Ensuite, ouvrez un autre nouveau fichier javascript, référencez-le dans votre code HTML comme n'importe quel fichier javascript normal,
et ajoutez ce qui suit:
Accentsconagua
$ (function () $ (". bouton"). click (function () // valider et traiter le formulaire ici);); La première fonction () fait, elle charge les événements à l'intérieur, dès que le document HTML est prêt. Si vous avez déjà travaillé dans jQuery auparavant, la fonction est identique à la fonction document.ready de jQuery. Nous commençons donc par cela, et à l'intérieur, nous avons notre fonction click qui s'exécute en cliquant sur le bouton d'envoi avec le nom de classe "bouton". En fin de compte, ce que nous avons accompli avec ces lignes de code est le même que si nous ajoutions un événement onclick au bouton d'envoi du code HTML. La raison pour laquelle nous le faisons avec jQuery est pour la séparation nette de notre présentation de nos scripts.
$ (function () $ ('. error'). hide (); $ (". button"). click (function () // valider et traiter le formulaire ici $ ('. error'). hide () ; var name = $ ("input # name"). val (); if (name == "") $ ("label # name_error"). show (); $ ("input # name"). focus ( ); return false; var email = $ ("input # email"). val (); if (email == "") $ ("label # email_error"). show (); $ ("entrée # email ") .focus (); return false; var phone = $ (" input # phone "). val (); if (phone ==" ") $ (" label # phone_error "). show (); $ ("input # phone"). focus (); return false;);); Dans notre fonction qui se charge lorsque la page est prête, nous ajoutons une validation de formulaire. Mais la première chose que vous voyez qui a été ajoutée est $ ('. Erreur'). Hide () ;. Cela masque nos 3 étiquettes avec le nom de classe "erreur". Nous voulons que ces étiquettes soient cachées non seulement quand
la page se charge en premier, mais aussi lorsque vous cliquez sur Soumettre, au cas où l'un des messages aurait déjà été montré à l'utilisateur. Chaque message d'erreur ne devrait apparaître que si la validation ne marche pas.
Nous validons en vérifiant d'abord si le champ du nom a été laissé vide par l'utilisateur et si c'est le cas, nous affichons ensuite l'étiquette avec l'id de name_error. Nous mettons ensuite le focus sur le champ de saisie du nom, au cas où l'utilisateur
est du tout confus sur ce qu'il faut faire ensuite! (J'ai appris à ne jamais trop assumer quand il s'agit de former des utilisateurs).
Pour expliquer plus en détail comment nous y parvenons, définissons une variable 'name' sur la valeur du champ de saisie avec l'id "name" - le tout avec une ligne de jQuery:
var name = $ ("input # name"). val (); Nous vérifions ensuite si cette valeur est vide et si c'est le cas, nous utilisons la méthode show () de jQuery pour afficher le libellé avec
id "name_error":
if (name == "") $ ("label # name_error"). show (); Ensuite, nous replaçons le focus du formulaire sur le champ de saisie avec l'id de "nom", puis nous renvoyons false:
if (name == "") $ ("label # name_error"). show (); $ ("input # name"). focus (); retourne faux; Assurez-vous d’avoir false dans votre code, sinon le formulaire entier est soumis (ce qui annule
le but de ce tutoriel)! Ce qui retourne false est qu’il empêche l’utilisateur de continuer.
sans remplir les champs requis.
Nous arrivons maintenant au cœur du tutoriel - soumettre notre formulaire sans rafraîchissement de la page, ce qui envoie les valeurs du formulaire à un script php en arrière-plan. Examinons tout le code en premier, puis je détaillerai plus en détail par la suite. Ajoutez le code suivant juste en dessous de l'extrait de validation que nous avons ajouté précédemment (et avant que la fonction de clic sur le bouton ne soit fermée):
var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; // alert (dataString); return false; $ .ajax (type: "POST", url: "bin / process.php", données: dataString, succès: function () $ ('# contact_form'). html (""); $ ('# message'). html ("Formulaire de contact soumis!
") .append ("Nous serons en contact bientot.
") .hide () .fadeIn (1500, function () $ ('# message'). append ("
"););); return false; Nous avons beaucoup de choses ici! Décomposons tout cela - c'est si simple et si facile à utiliser une fois que vous avez compris le processus. Nous créons d’abord une chaîne de valeurs, qui sont toutes les valeurs de formulaire que nous voulons transmettre au script qui envoie le courrier électronique..
Rappelons précédemment, nous avions défini une variable 'name' avec la valeur du champ de saisie avec id "name", comme suit:
"););); return false; var name = $ ("input # name"). val (); Nous pouvons utiliser à nouveau cette valeur 'name', ainsi que les valeurs 'email' et 'phone', pour créer notre chaîne de données:
var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone;
J'ai commenté une alerte que j'utilise parfois pour m'assurer de saisir les bonnes valeurs, ce qui peut vous être utile dans le processus. Si vous supprimez la mise en commentaire de cette alerte et testez votre formulaire, en supposant que tout se passe bien jusqu'à présent, vous devriez recevoir un message similaire à celui-ci:
Nous arrivons maintenant à notre fonction principale ajax, la vedette du spectacle d'aujourd'hui. C'est là que se passe toute l'action, alors payez
une attention particulière!
$ .ajax (type: "POST", url: "bin / process.php", data: dataString, success: function () // retourne le message à l'utilisateur ici); retourne faux;
Voici ce qui se passe dans le code: la fonction .ajax () traite les valeurs de notre chaîne appelée dataString (data: dataString) avec un script php appelé process.php (url: "bin / process.php"), en utilisant la méthode 'POST' (type: "POST"). Si notre script a été traité avec succès, nous pouvons ensuite afficher un message à l'utilisateur et finalement renvoyer false afin que la page ne soit pas rechargée. C'est tout! L'ensemble du processus est géré ici dans ces quelques lignes!
Vous pouvez faire des choses plus avancées ici, à part envoyer un courrier électronique et transmettre un message de réussite. Par exemple, vous pouvez envoyer vos valeurs à une base de données, les traiter, puis afficher les résultats à l'utilisateur. Ainsi, si vous publiez un sondage auprès des utilisateurs, vous pouvez traiter leur vote, puis renvoyer les résultats du vote, le tout sans aucune actualisation de page..
Résumons ce qui s’est passé dans notre exemple, pour être sûr que nous avons tout couvert. Nous avons saisi nos valeurs de formulaire avec jQuery, puis les avons placées dans une chaîne comme celle-ci:
var name = $ ("input # name"). val (); var email = $ ("input # email"). val (); var phone = $ ("input # phone"). val (); var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; Nous avons ensuite utilisé la fonction ajax de jQuery pour traiter les valeurs de la chaîne de données. Après ça
processus se termine avec succès, nous affichons un message à l'utilisateur et ajoutons return false afin que notre page ne s'actualise pas:
$ .ajax (type: "POST", url: "bin / process.php", données: dataString, succès: function () $ ('# contact_form'). html (""); $ ('# message'). html ("Formulaire de contact soumis!
") .append ("Nous serons en contact bientot.
") .hide () .fadeIn (1500, function () $ ('# message'). append (""););); return false; La partie succès du script a été complétée avec un contenu spécifique qui peut être affiché à nouveau à l'utilisateur. Mais en ce qui concerne notre fonctionnalité ajax, c’est tout. Pour plus d'options et de paramètres, assurez-vous de consulter la documentation de jQuery sur la fonction ajax. L’exemple présenté ici est l’une des implémentations les plus simples, mais même dans ce cas, il est très puissant, comme vous pouvez le constater..
Examinons brièvement la partie du code qui affiche notre message à l'utilisateur pour terminer le didacticiel..
Tout d'abord, nous modifions l'intégralité du contenu de la div contact_form (rappelez-vous que j'ai dit que nous aurions besoin de cette div) avec la ligne suivante:
$ ('# contact_form'). html (""); Ce que cela a fait est de remplacer tout le contenu de la div contact_form, en utilisant la fonction html () de jQuery. Ainsi, au lieu d’un formulaire, nous avons maintenant juste une nouvelle div à l’intérieur, avec l’identifiant «message». Ensuite, nous remplissons cette div avec un message réel - un h2 disant "Formulaire de contact soumis":
$ ('# message'). html ("Formulaire de contact soumis!
") Nous ajoutons ensuite encore plus de contenu au div de message avec la fonction append () de jQuery, et pour couronner le tout, nous ajoutons un effet sympa en masquant le message de div avec la fonction hide () de jQuery, puis nous le fondons avec le fadeIn () une fonction:
.ajouter("Nous serons en contact bientot.
") .hide () .fadeIn (1500, function () $ ('# message'). append ("");); Ainsi, l'utilisateur finit par voir ce qui suit après avoir soumis le formulaire:
A présent, je pense que vous devrez admettre qu'il est incroyablement facile de soumettre des formulaires sans actualisation de page à l'aide de la puissante fonction ajax de jQuery. Obtenez simplement les valeurs dans votre fichier javascript, traitez-les avec la fonction ajax et renvoyez false, et vous êtes prêt à partir. Vous pouvez traiter les valeurs dans votre script php comme n'importe quel autre fichier php, la seule différence étant que l'utilisateur n'a pas à attendre une actualisation de la page - tout se passe en arrière-plan.
Donc, si vous avez un formulaire de contact sur votre site Web, un formulaire de connexion, ou même des formulaires plus avancés qui traitent les valeurs via une base de données et récupèrent les résultats, vous pouvez le faire facilement et efficacement, et peut-être le plus important, vous améliorez l'utilisateur final. expérience avec votre site Web en offrant une interactivité sans avoir à attendre que la page soit rechargée.
Je voudrais ajouter quelques derniers mots concernant l’exemple de démonstration fourni. Dans la démo, vous remarquerez peut-être qu’un seul plug-in est utilisé: le fichier runonload.js. Au début du didacticiel, j'ai indiqué que nous n'utiliserions aucun plug-in. Vous trouverez ensuite dans la démo un script runonload supplémentaire. Il vous faudra peut-être une explication! Pour toute personne intéressée par une démonstration de travail en direct, vous pouvez consulter le formulaire de conseil en référencement de mon site Web..
La seule utilisation que j'ai faite avec runonload n'a en réalité rien à voir avec le traitement du formulaire. Ainsi, vous pouvez accomplir les fonctions ajax complètement sans aucun plugin supplémentaire. J'ai uniquement utilisé runonload pour concentrer le champ de saisie du nom lors du chargement de la page. D'après mon expérience, appeler runonload peut parfois être un meilleur substitut à la fonction de préparation de documents natifs de jQuery, ce que j'ai constaté lors de la création de ce didacticiel. Pour une raison quelconque, la fonction focus () ne fonctionnerait pas avec le chargement de page à l'aide de la fonction de préparation de documents natifs de jQuery - mais cela fonctionnait avec runonload et c'est pourquoi vous l'avez trouvée dans l'exemple. Donc, si vous connaissez un moyen de réaliser cela sans utiliser runonload, je serais heureux de vous entendre parler de cela..
Nous avons créé un guide complet pour vous aider à apprendre le JavaScript, que vous soyez débutant en tant que développeur Web ou que vous souhaitiez explorer des sujets plus avancés..
