1

Im trying to pass a value from one page for a product to another page for the cart.

I've tried a few different options but haven't managed to come up with any solution.

I'm new to html and javascript so need a simple solution if thats possible so that I can understand.

Product Page

<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>

Cart page

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

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

I would need to value from the drop down to be passed to the cart page to work out the value for all the users products selected.

huaLin
  • 97
  • 2
  • 13
Lavinia Stilli
  • 11
  • 2

4 Answers4

1

You need to add two arguments to sessionStorage: key and value. Something like this:

sessionStorage.setItem("selectValue", value);

Also, as far as I know if you work with local html files opened like path/cart.html in the browser, the sessionStorage can't help you; it's scope is limited to the page. If you serve them through localhost, you'll be alright.

Ferenc
  • 527
  • 3
  • 6
0

If this pages have different url, you can do it with query params: https://en.wikipedia.org/wiki/Query_string

Uladzislau Ulasenka
  • 582
  • 5
  • 14
0

By Browser Storage Method :

As mentioned by @Ferenc, the setItem method of session storage takes two parameters.

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

or you can use sessionStorage["selectedItem"] = "value";

And to retrieve the value anywhere else in the browser you can either use the getItem() method or you can go with the array like value access approach i.e. 

var value = sessionStorage["selected"];

But I would suggest you go with localStorage instead of sessionStorage, Because of it's larger scope than the sessionStorage scope. You can read difference b/w session storage and local storage here.
Note: You can check for errors in your javascript code(Which now occurs when you call the getItem method with a single parameter ) by looking in the browser console.

By Query Parameters:

Well, this is not a recommended method if you are not using any server-side language. i.e. Java, PHP etc. In this case, you append the query string in url. i.e. 

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

To Read how to access query parameters by using javascript refer to this question.

Jatin Asija
  • 128
  • 4
  • 13
0

It worked for me to add to the 1st HTML file:

where_from = document.getElementById("where_from").value;
sessionStorage.setItem("pass_to_other_form", where_from);

and then to the 2nd HTML file:

var from_other = sessionStorage.getItem("pass_to_other_form");
Saeed Zhiany
  • 2,051
  • 9
  • 30
  • 41
EmissaryofEmpowerment
  • 1
  • 1