- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :La première chose qu'on va faire c'est modifier quelque peu notre formulaire à l'intérieur dufichier HTML. Donc je vais enlever les balises de formulaire, donc cette balise ici est la
00:00:09 :balise qui ferme, et on va également enlever le CSRF token puisqu'on va vouloir en faitrécupérer directement les données de nos inputs en javascript et les envoyer avec notre requêteà la vue qui va nous permettre de faire le calcul. Donc ce que je vais faire ici maintenant que je
00:00:25 :n'ai plus de formulaire, c'est rajouter un événement qui va écouter en fait le clic dela souris sur le bouton submit, donc ce bouton ici avec le ID de FetchCall. Donc pour ça dans
00:00:36 :ma balise ici script, je vais rajouter du javascript puisque cette balise ici me permetd'intégrer du javascript à l'intérieur de mon fichier HTML, et ce qu'on va faire déjà c'estdonc récupérer le bouton avec le ID FetchCall ici. Donc pour ça on va faire document.querySelector,
00:00:52 :qui nous permet de récupérer des informations sur notre page, et on va récupérer l'élément avecle ID de FetchCall. Ensuite on va ajouter donc un EventListener, donc on va faire AddEventListener,
00:01:04 :et ça va nous permettre d'écouter un événement, dans ce cas-ci ça va être l'événement du clic,et on va ensuite créer une fonction fléchée avec l'événement que l'on va récupérer et quel'on va pouvoir utiliser par la suite pour empêcher la soumission du formulaire. Donc pour l'instant je
00:01:20 :ne vous en dis pas plus, on verra par la suite comment empêcher le formulaire d'être soumis. Pourl'instant on a enlevé cette balise de formulaire, donc ça ne pose pas de problème, mais on verra parla suite qu'on va utiliser cet événement ici. Donc là je fais une fonction fléchée, j'ouvre donc ma
00:01:33 :fonction avec les accolades ici, et je la ferme ici avec une autre accolade, et on va fermer notreparenthèse que l'on a ouverte ici avec le AddEventListener. Donc ça ça va tout simplement
00:01:42 :créer un événement sur le clic, donc pour l'instant si je mets un console.log et que jemets bonjour ici, si on retourne sur notre page et que j'ouvre les outils de Chrome, donc en faisantun clic droit inspect, on va aller dans la console pour voir ici ce qui est affiché. Donc je vais
00:01:58 :faire un petit peu de place pour qu'on y voit quelque chose, et donc si j'actualise la page etque je clique sur calculer, vous voyez qu'on a bien bonjour qui s'affiche, et le formulaire n'est passoumis puisque on a enlevé les balises du formulaire. Donc là quand je clique sur calculer, vous voyez
00:02:11 :que la page n'est pas rafraîchie puisqu'on n'a aucun formulaire qui est envoyé. Donc j'ai bienbonjour ici qui s'affiche, donc ça fonctionne correctement. Maintenant je vais récupérer donc
00:02:19 :les données qui sont à l'intérieur de ces inputs, donc les données qui sont dans le input avec leID de A et le input avec le ID de B. Donc là encore on va utiliser les query selectors, donc
00:02:31 :on va faire document.querySelector et on va aller chercher cet input avec le ID de A. Donc on vamettre le symbole du hashtag et le A, donc puisqu'on veut cibler le ID ici, donc il faut mettre lehashtag, et on va récupérer la valeur qui est associée à cet élément, donc .value ici pour
00:02:49 :récupérer la valeur de notre input. On va faire pareil avec B, donc je copie cette ligne et je lacolle ici, et on va aller cibler l'identifiant de B, donc cet input ici. Donc ça, ça nous permet de
00:02:59 :récupérer les deux valeurs qui sont à l'intérieur de nos boîtes de textes, et on va pouvoir ensuitecréer un objet formulaire qui va nous permettre d'envoyer ces données avec notre requête. Donc
00:03:08 :avant ça ici, je vais créer mon formulaire, donc je vais utiliser let et je vais appeler ma variableformData tout simplement. On pourrait même juste l'appeler form, ce serait plus clair. Et je vais
00:03:18 :créer donc un nouvel objet de type formData. Donc ça c'est un objet javascript qui est un formulairequi va contenir les données du formulaire, et on va pouvoir envoyer ces données à notre vue, donc ànotre vue ici que l'on n'a pas encore créé, mais qui va nous permettre de réaliser l'opération. Donc
00:03:34 :ensuite ce que je vais faire c'est ajouter mes données, donc ces deux données ici que l'on arécupérées avec le javascript, je vais les ajouter à ce formulaire. Donc pour ça je vais faire form.append
00:03:43 :et on va ajouter une clé et une valeur. Donc la clé ça va être le nom de la clé qu'on va récupérerdans notre vue, donc par exemple ce qu'on avait mis ici dans notre vue actuellement dans home,on a notre dictionnaire request.post et on a une clé qui s'appelle A, une clé qui s'appelle B. Donc
00:03:58 :c'est le nom qu'on va donner ici à nos clés dans le formulaire. On pourrait bien entendu les appelern'importe comment, je pourrais mettre test ici ou Patrick et ça fonctionnerait de la même façon.
00:04:06 :Ici c'est juste des noms qui vont nous permettre de nommer donc les données que l'on va envoyer ànotre vue. Donc je vais mettre A ici et on va mettre ensuite la valeur, donc la valeur que
00:04:14 :l'on a récupérée ici. Donc je vais la mettre directement, je vais la prendre et je vais lamettre après la virgule ici. Donc on a comme dans un dictionnaire Python en fait la clé ici et la
00:04:23 :valeur qui est associée. Je ferme ma parenthèse, je mets le point virgule et on va copier cetteligne et faire la même chose avec B. Donc je mets une clé qui est B ici, donc la chaîne de caractère
00:04:32 :et on va copier cette ligne et la mettre ici à la place du querySelector de A. J'enlève lespoints virgule qui ne servent plus à rien et voilà on a bien donc créé notre formulaire qui vacontenir les données que l'on va pouvoir envoyer à notre vue. Donc voilà comment récupérer les
00:04:47 :données, je vais juste faire un log pour m'assurer qu'on a bien les données qui sont récupérées. Doncje vais récupérer ces données ici, cette ligne, je vais la copier et la coller ici et on va faireun console.log de A et de B pour juste vérifier qu'on a bien les bonnes valeurs qui sont récupérées
00:05:01 :et affichées. Donc j'étends ma fenêtre ici, je refais un clic droit, je vais dans les outilsd'inspection, je retourne dans la console, on va actualiser la page, je vais rentrer desnombres ici dans les boîtes de texte, donc on va mettre 5 et 6, je clique sur calculer et là vous
00:05:16 :voyez qu'on a un petit problème, donc on a une erreur de syntaxe qui doit être quelque part ici,alors où elle se trouve ? Voilà alors j'ai oublié le point virgule déjà ici, donc point value alors
00:05:26 :là effectivement en fait on a deux symboles comme ça, donc deux guillemets et donc c'est ça je pensequi posait problème. Donc je vais recharger ma page, donc là on n'a plus l'erreur de syntaxe donc
00:05:36 :c'est bon. Alors je vais remettre 5 ici, 6 ici, j'appuie sur calculer et là j'ai bien les deuxvaleurs qui sont affichées, donc 5 pour le premier input et 6 pour le deuxième input, donc ça marcheparfaitement. Donc voilà comment récupérer nos informations directement avec javascript, donc en
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.