Récupérer les données du formulaire

00:00:00 :La première chose qu'on va faire c'est modifier quelque peu notre formulaire à l'intérieur du fichier 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 fait ré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 de la 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 permet d'intégrer du javascript à l'intérieur de mon fichier HTML, et ce qu'on va faire déjà c'est donc 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 avec le 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 que l'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. Pour l'instant on a enlevé cette balise de formulaire, donc ça ne pose pas de problème, mais on verra par la 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 notre parenthè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 je mets bonjour ici, si on retourne sur notre page et que j'ouvre les outils de Chrome, donc en faisant un 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 et que je clique sur calculer, vous voyez qu'on a bien bonjour qui s'affiche, et le formulaire n'est pas soumis 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 bien bonjour 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 le ID 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 va mettre le symbole du hashtag et le A, donc puisqu'on veut cibler le ID ici, donc il faut mettre le hashtag, 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 la colle 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 ensuite cré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 variable formData 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 formulaire qui 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 a ré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érer dans 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 appeler n'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 la mettre 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 cette ligne 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 les points virgule qui ne servent plus à rien et voilà on a bien donc créé notre formulaire qui va contenir 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. Donc je vais récupérer ces données ici, cette ligne, je vais la copier et la coller ici et on va faire un 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 outils d'inspection, je retourne dans la console, on va actualiser la page, je vais rentrer des nombres 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 pense qui 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 deux valeurs qui sont affichées, donc 5 pour le premier input et 6 pour le deuxième input, donc ça marche parfaitement. Donc voilà comment récupérer nos informations directement avec javascript, donc en
00:05:51 :récupérant les données qui sont affichées à l'intérieur de nos deux boîtes de texte et en créant donc un formulaire que l'on va pouvoir par la suite ajouter à notre requête.

Deviens membre Premium magic_button

Premium

Deviens membre Premium magic_button

Premium

Inscris-toi