How to save the selected select option drop-down once webpage has loaded

Question

I need some help with this HTML code I'm trying to improve. I don't have much HTML knowledge so the most basic solution would be nice.

Currently, the code works fine but I want once the page has loaded for the drop-down option to be that of the selected option that I click Submit with. Same with the slider, if I select 2, I want 2 to be displayed on the new page once loaded.

Is there a way to do this with variables or how?

<div id="input_header">
    <div id="logo_div">
        <img id="logo" src="static/steering-wheel.svg">
        <p id="logo_name">TITLE</p>
    </div>
    <form id="driver_form" action="compare_driver" method="get">
                <p class="label">Vendor:</p>
                <select class="driver_input_box" name="driver_vendor">
                    <option value="Vendor A">AAA</option>
                    <option value="Vendor B">BBB</option>
                    <option value="Vendor C">CCC</option>
                </select>
                <p class="label"># to show: </p>
                <div id="count_slider">
                    <input id="driver_count_id" name="driver_count" type="range" min="1" max="10" step="1" value="5" oninput="driver_count_out_id.value = driver_count_id.value"/>

                    <output id="driver_count_out_id" name="driver_count_output" >5</output>
                </div>
        <input id="compare_driver" type="submit" value="Compare">

    </form>
</div>

If I understood you correctly, you want the page to store in the user machine his preferences. Can't you store the values in a cookie? Or in `localStorage || sessionStorage`? Alternatively, you can use JavaScript to send the user selection to a server, and store it there (displaying it again after the user requests the page). I don't think it's possible to store it without JavaScript, just with pure HTML. Did I understand you correctly? It would help if you edited the question to clarify a bit more what you want — flen, Jan 18 '18 at 10:14
Yes that's correct flen! Please do edit it,I guess something like localStorage or sessionStorage is ideal as I just need this for the session. — O. Pine, Jan 18 '18 at 10:16
The JavaScript is pretty straightfoward, https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage `sessionStorage.setItem`. I'll put it in an answer — flen, Jan 18 '18 at 10:20
Why not server sessions if you need it on the next page too? for example PHP: `` — mplungjan, Jan 18 '18 at 10:32
@mplungjan if I'm not mistaken, sessionStorage works for the whole domain. You can add it to the server, but why burden the server with this if you can store it in the user's machine? It's faster and has zero bandwidth — flen, Jan 18 '18 at 10:37
`I want 2 to be displayed on the new page once loaded.` So the user does something with the data on the server - then why burden the client with it if the html can contain the selections and values without any script? — mplungjan, Jan 18 '18 at 10:39
@mplungjan But I think I didn't understand you then. Is it possible for PHP to know which option the user selected without any JavaScript? Or would it be an HTML form submission? — flen, Jan 18 '18 at 10:48
"but I want once the page has loaded for the drop-down option to be that of the selected option that I **click Submit** with" — mplungjan, Jan 18 '18 at 10:56
@mplungjan shame on me... I didn't know about this: https://www.w3schools.com/php/php_sessions.asp you are right, a server session could be a more natural way to do it. Still, I think it might be better to not bother PHP (or any other code the server runs) and simply let the client do the work, though there might not be much of a difference and the PHP way might be more professional — flen, Jan 18 '18 at 10:56
I tried with PHP: , but when added to all 3 options, the drop-down reset to the first option on the new page load. — O. Pine, Jan 18 '18 at 11:01
My code was pseudo code. You of course need to think a little and not drop my code blindly into your code. I cannot see your server code but it is likely a little more complex than what I posted — mplungjan, Jan 18 '18 at 13:15

flen · Answer 1 · 2018-01-20T22:22:46.890

First you need to include some JavaScript there. The easiest (but probably worse) way is to add an script tag to the HTML.

To get the selected option with Javascript, you can check these answers: Get selected value in dropdown list using JavaScript? . The code will be easier to write if you give an id to your <select>, like: <select id="mySelect" class="driver_inpu....

<script>
//check if there's an old selection by the user:
if (sessionStorage.getItem("selectedOption")) {
  //to set the selected value:
  document.getElementById("mySelect").value = sessionStorage.getItem("selectedOption");
}

//this will set the value to sessionStorage only when user clicks submit
document.getElementById("driver_form").addEventListener("submit", () => {
  //to get the selected value:
  var selectedOption = document.getElementById("mySelect").value;
  sessionStorage.setItem("selectedOption", selectedOption);
});

/*
//use this only if you want to store a new value 
//every time the user clicks on another option
document.getElementById("mySelect").addEventListener("change", () => {
  //to get the selected value:
  var selectedOption = document.getElementById("mySelect").value;
  sessionStorage.setItem("selectedOption", selectedOption);
});
*/
</script>

You can put it in window.onload if you want to. This answer should put you in the right track. I'm very tired and I haven't tested it, but it should work.

@O.Pine I just realized you didn't want to store the value every time the user clicked on a new value. You only wanted to store the value when user submitted the form. I changed the code to reflect that, sorry for my previous mistake — flen, Jan 18 '18 at 11:09
Np, I have updated my script to only save at submit. Thanks for the help, much appreciated! — O. Pine, Jan 18 '18 at 12:23

How to save the selected select option drop-down once webpage has loaded

1 Answers1