Récuperer une infos dans un formulaire

L'afficher sur une autres page

Sujet résolu

18 mars 2018 à 19:46:12

Bonjour,

comme le titre du sujet l'indique j'aimerais récupérer le texte entrée dans un petit formulaire et l'afficher sur 2ième pages.

Je ne comprend pas car selon moi la manip est bonne,voici le code html de ma 1iere page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion, copie et suppression de données</title>
    <link rel="stylesheet" href="TD4.css">
  </head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="TD4.js"></script>

<body id = "formulaire">
    
<form method="post" action="Exos5TD4.html">
    
        <input type="text" id = "infos">
        <input type="submit" onClick= "affiche()">
    
    

</form>
    
    
</body>
    <script type= "text/javascript">
       
    </script>
        
</html>

et voici le code javascript dans mon fichier TD4.js :

    function affiche(){
            let txt = $("#infos").text();
               return txt;
                              }
    let txt = affiche();
    $(".redirection").text("Bonjour !");

voici le code html de ma 2ième page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion, copie et suppression de données</title>
    <link rel="stylesheet" href="TD4.css">
  </head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="TD4.js"></script>
<body>
    <div id = "block">
        Sur la première page, vous avez entré le texte
        <div class="redirection" ></div>.
    </div>
    
</body>
<script type= "text/javascript">


</script>

Merci d'avance pour le ou les coups de mains.

-
Edité par ElsonGesteur 18 mars 2018 à 19:47:06

“L'enseignement devrait être ainsi : celui qui le reçoit le recueille comme un don inestimable mais jamais comme une contrainte pénible.”

0xEE

19 mars 2018 à 11:01:15

Bonjour,

Si j'ai bien compris, tu demande à la page 1 d'envoyer un texte ("toto" par exemple) puis de l'afficher sur la page 2.

Vu que l'HTML n'est pas un langage de programmation mais seulement de structuration et que le JS vanille n'est pas un langage serveur il n'est pas possible de faire passer une information de page1 vers page2 seulement avec ce code.

Déjà, tu lance la fonction affiche() sur la page 1. La page 1 ne peux pas interagir directement avec la page 2 et donc pour afficher quelque chose en javascript sur la page 2 tu dois lancer la fonction sur la page 2.

Bref, il te reste des informations a apprendre comme par exemple comment fonctionne le protocole HTTP et les navigateur web.

Lorsque depuis le formulaire de page 1 tu contact page 2, tu lui envoie une requête de type POST donc avec les informations dans la requête et non dans l'URL.

Ton navigateur reçoit donc une requête HTTP de type POST qui va lui demander d'afficher une page structurer comme défini dans page2.

Il faut maintenant que soit le code JS recherche dans la requête les informations a récupérer soit que tu passe par un serveur web (nodejs, php ou c# pour n'en citer que 3).

-
Edité par 0xEE 19 mars 2018 à 11:01:32

Lucky13

19 mars 2018 à 14:03:25

Hello,

Si c'est possible en JS, tu récupères le "value" de ton imput, tu la stock en local ou session storage pour la récupérer quand tu le souhaites.

Par contre on reste côté client, donc non sécurisé pour des données sensibles.

Sinon la solution de mon VDD est recommandée...

-
Edité par Lucky13 19 mars 2018 à 14:04:47

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

ElsonGesteur

19 mars 2018 à 20:15:22

ok je vais essayer avec la méthode de storage..

ps : que veux dire VDD ?

“L'enseignement devrait être ainsi : celui qui le reçoit le recueille comme un don inestimable mais jamais comme une contrainte pénible.”

Lucky13

19 mars 2018 à 20:38:24

Mon Voisin Du Dessus

webStorage, rien de complexe - > https://www.alsacreations.com/article/lire/1402-web-storage-localstorage-sessionstorage.html

Capture sus chrome depuis le site d'OC:

-
Edité par Lucky13 19 mars 2018 à 20:41:58

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

ElsonGesteur

19 mars 2018 à 21:13:14

Voila ce que j'ai essayer, qui se rapprocher d'un résultat.

d'abord via une fonction:(fichier TD4.js, lie aux 2 pages)

    /*Stocke ma donnée dans une variable et la retourne*/
    function affiche(){
        let txt = localStorage["input"]= $("#infos").text();
        return txt;

            
    }

ensuite j'essaye de l'afficher dans la console de la 2ième page:

<script type= "text/javascript">
    
    let txt = affiche();
    console.log(txt["input"]);
    

</script>

j'ai aussi essayé avec sessionStorage mais ça n'a rien donnée cela est vraiment possible de cette manière ou je dois changer de méthode...?

ps: j'ai gardé le même code html que précédement

-
Edité par ElsonGesteur 19 mars 2018 à 21:14:34

“L'enseignement devrait être ainsi : celui qui le reçoit le recueille comme un don inestimable mais jamais comme une contrainte pénible.”

Lucky13

19 mars 2018 à 21:18:30

Est-ce la méthode de travailler le webStorage en jQuery ?

As-tu consulté mon lien ?

ps: on est en 2018, pas la de préciser le type="text/javascript" , la balise <script> suffit, suivant un cas spécial, il faut aussi la placer juste avant la fermeture du <body> pour être sûr que le document HTML soit bien chargé et prêt à être travailler.

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

ElsonGesteur

19 mars 2018 à 22:52:29

oui je pense qu'il n'y a pas de soucis à ce niveau (..webStorage dans Jquery).

J'arrive à récupérer la donnée en suivant la méthode du site mais rien de concluant du coté de l'affichage sur la 2ème page.

Est-ce que quelqu'un s'est rétrouvé dans le même cas de figure et y es arrivé avec seulement Jquery et js ?

ps:Apparemment ce que dit glouke se vérifie..

“L'enseignement devrait être ainsi : celui qui le reçoit le recueille comme un don inestimable mais jamais comme une contrainte pénible.”

Lucky13

19 mars 2018 à 22:55:52

Perso je n'utilise plus jQuery...

Si tes données sont bien en localStorage (vérifie depuis la console du navigateur comme je l'ai montré plus haut) alors tu peux les récupérer depuis n'importe quelle pages.

J'utilise le storage fréquemment comme la plupart des sites et je n'ai aucun souci.

C'est donc un souci de code de ton côté...

Si besoins passe par le forum JS ou PHP si tu change de technique, ce n'est plus du ressort du forum HTML

-
Edité par Lucky13 19 mars 2018 à 22:57:42

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

ElsonGesteur

19 mars 2018 à 23:13:48

Oui apparemment il y est.. et donc normalement par une simple méthode de d'écriture dans un champs <balise> je devrais pouvoir avoir le resultat voulu.. Bon je vais encore chipoter un peu.

-
Edité par ElsonGesteur 19 mars 2018 à 23:17:25

“L'enseignement devrait être ainsi : celui qui le reçoit le recueille comme un don inestimable mais jamais comme une contrainte pénible.”

Lucky13

20 mars 2018 à 0:06:19

Et bien de la même manière tu récupère la valeur -> clé en storage puis tu l'injectes dans un élément HTML

ex après récupération de la valeur et affectation dans une variable var infos , et une balise <p class="infos">

$('.infos').text(infos);

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

ElsonGesteur

21 mars 2018 à 0:27:54

Oui merci j'ai effectivement fais comme ça..

-
Edité par ElsonGesteur 21 mars 2018 à 0:28:17

“L'enseignement devrait être ainsi : celui qui le reçoit le recueille comme un don inestimable mais jamais comme une contrainte pénible.”