1

I have just solved one part of my puzzle in making Divs appear on a page based on a selection and then making that selection disappear to stop people reselecting.

How do I now store that selection in a session so when they navigate to another page on the site and then come back its still the same. Also can I use the session to display divs on other pages based on the original selection?

I appreciate that with session storage this will then clear when the browser closes, this is fine.

Here is a fiddle of where I am so far https://jsfiddle.net/k33npx/s8k7tfgr/2/

<h4>Your Tariff</h4>
                            
                            
                            <div>
                                Value Selected: <span id="current"></span>
                                <br>
                                <br>
                                <select class="select" id="select">
    <option>Choose Your Option</option>
    <option name="Tarrif 1" value="t1"> 1</option>
    <option name="Tarrif 2" value="t2"> 2</option>
    <option name="Tarrif 3" value="t3"> 3</option>
    <option name="Tarrif 4" value="t4"> 4</option>
</select>

                            <div class="t1"><p>Tariff 1</p></div>
                            <div class="t2"><p>Tariff 2</p></div>
                            <div class="t3"><p>Tariff 3</p></div>
                            <div class="t4"><p>Tariff 4</p></div>
                        </div>

.t1
{display: none}

.t2
{display: none}

.t3
{display: none}

.t4
{display: none}

.select
{display:block}


function showSelectedItem() {

    
    
    
   var item = document.getElementById("select").value;
    
  document.getElementById("current").innerHTML = item;
  const classes = ['t1', 't2', 't3', 't4', 'select'];
  // hide all first;
  classes.forEach((classNode) => {
    document.querySelector(`.${classNode}`).style.display = classNode === item ? 'block': 'none';
  });
    
}
document.getElementById("select").addEventListener("change", showSelectedItem);

Thanks

Paul Keen
  • 13
  • 2
  • Does this answer your question? [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) – Liam Sep 24 '21 at 10:24
  • Thanks, that does look pretty similar to what I am trying to achieve. Although I don't think I quite get it enough to make it work. My input type would be "change"? then do I want to call the value "select".value and then put showselected(function() – Paul Keen Sep 24 '21 at 10:55
  • I have managed to progress this project and can select the tariff, show what the selection was and then unhide multiple DIVs on the same page which is great. The next step is still saving that selection for this session. I think I have added the code to save the selection to a session, but how do I check for this when it loads and apply it if it exists? I have tried a few different things but I am clearly not understanding what is going on. Here is the latest fiddle https://jsfiddle.net/k33npx/cbe36aq5/8/ – Paul Keen Oct 21 '21 at 08:16

0 Answers0