1
votes

Passer des variables d'une page à une autre

J'essaie de transmettre une valeur d'une page pour un produit à une autre page pour le panier.

J'ai essayé plusieurs options différentes, mais je n'ai pas réussi à trouver de solution.

Je suis nouveau dans le html et le javascript, j'ai donc besoin d'une solution simple si cela est possible pour que je puisse comprendre.

Page produit

<script type="text/javascript">
   var value = sessionStorage.getItem("value");
   document.getElementById('display').innerHTML = value;
</script>

<body>
  <div id="display"></div>
</body>

Page panier

<label for="exampleFormControlSelect1">Example select</label>
<div>
   <select class="form-control" id="Selected">
       <option value='1'>1</option>
       <option value='2'>2</option>
       <option value='3'>3</option>
       <option value='4'>4</option>
       <option value='5'>5</option>
   </select>
</div>
<button id='btn' type="button" class="btn btn-secondary">Add To Cart</button>

<script type="text/javascript">
   var value=0;

   function send_selected(){
      var selector = document.getElementById('Selected');
      var value = selector[selector.selectedIndex].value;

      sessionStorage.setItem(value);
   }

   document.getElementById('btn').addEventListener('click',send_selected);
</script>

J'aurais besoin de valoriser à partir de la déroulant pour être transmis à la page du panier pour déterminer la valeur de tous les produits sélectionnés par les utilisateurs.

javascript html variables

1 commentaires

Vérifiez ici comment utiliser setItem developer.mozilla.org/en -US / docs / Web / API / Stockage / setItem

3 Réponses :

1
votes

Vous devez ajouter deux arguments à sessionStorage: key et value. Quelque chose comme ceci:

sessionStorage.setItem("selectValue", value);

Aussi, pour autant que je sache, si vous travaillez avec des fichiers HTML locaux ouverts comme path / cart.html dans le navigateur, le sessionStorage ne t'aide pas; sa portée est limitée à la page. Si vous les diffusez via localhost, tout ira bien.

0 commentaires

0
votes

Si ces pages ont une URL différente, vous pouvez le faire avec les paramètres de requête: https: // en. wikipedia.org/wiki/Query_string

0 commentaires

0
votes

Par méthode de stockage du navigateur:

Comme mentionné par @Ferenc, la méthode setItem de stockage de session prend deux paramètres.

http://www.url.com?value=selected

ou vous pouvez utiliser sessionStorage ["selectedItem"] = "value";

Et pour récupérer la valeur n'importe où ailleurs dans le navigateur, vous pouvez soit utiliser la méthode getItem () , soit utiliser la méthode tableau comme approche d'accès à la valeur, c'est-à-dire

var value = sessionStorage["selected"];

Mais je vous suggère d'opter pour localStorage au lieu de sessionStorage, en raison de sa portée plus large que celle de sessionStorage. Vous pouvez lire la différence entre le stockage de session et le stockage local ici.
Remarque: vous pouvez rechercher des erreurs dans votre code javascript (ce qui se produit maintenant lorsque vous appelez la méthode getItem avec un seul paramètre) en regardant dans la console du navigateur.

Par paramètres de requête:

Eh bien, ce n'est pas une méthode recommandée si vous n'utilisez aucun langage côté serveur. c'est-à-dire Java, PHP, etc. Dans ce cas, vous ajoutez la chaîne de requête dans url. ie

sessionStorage.setItem("selectedItem","value");

Pour savoir comment accéder aux paramètres de requête en utilisant javascript, reportez-vous à cette question.

0 commentaires