How do you Save a Selected Option in a Selection List

Question

For my web app I have a selection list coded as below;

<select name = 'job' id = 'job'>
<option value = 'jobselect'>Select Profession</option>
<option value = 'job1'>Mechanical Engineer</option>
<option value = 'job2'>Software Engineer</option>
<option value = 'jobother'>Other</option>
</select>

in the settings page. this page is linked to a 'save.js' file where the user input is supposed to be saved. i am using HTML and JavaScript - and no knowledge of PHP. In my JS file i have two functions - saveSettings and loadSettings. i'm stuck as to how to save it to localStorage (JavaScript) in the saveSettings function and reading it back to the user in the loadSettings. Any help would be much appreciated thanks x

Isobaric

it means u want to store value for selected item in javascipt ?? am i right. – Distich

yes that's what it means. sorry about the confusion x – Isobaric

what does that have to do with the question? someone else said that and i've no idea what it means or has to do with the question i'm asking – Isobaric

oh ok. but i don't know if the answer is right - i'm not sure how to integrate it into my JS file to go over the two functions i told you about in my comment on your answer. it looks right and all but i need to test it before i accept it – Isobaric

i'm sorry that sounded really rude. i just meant i was stuck and didn't know how to expand the answer you gave me. is there a way to read the value you get from the first line of code? – Isobaric

Answer 1

To save on change:

<script>
document.addEventListener('DOMContentLoaded', function () {
   var input = document.getElementById('job');
   if (localStorage['job']) { // if job is set
       input.value = localStorage['job']; // set the value
   }
   input.onchange = function () {
        localStorage['job'] = this.value; // change localStorage on change
    }
});
</script>

For individual methods:

var input = document.getElementById('job');
function loadSettings() {
    if (localStorage['job']) {
        input.value = localStorage['job'];
    }
}

function saveSettings() {
    localStorage['job'] = input.value;
}

Debar

ok thanks. i should have mentioned this sorry but i have two functions in my JS file called saveSettings and loadSettings. is it possible to split this up between the two functions? – Isobaric

@MeganSime ok - I've split it. – Debar

thanks a lot for the help but it broke my settings button so i can't access the page - i don't mean to offend you but are you sure you've got the write code? – Isobaric

or could you please tell me how to attach the first block of code you gave me to a line of code like; $('#settings').bind('pageAnimationStart', loadSettings); that might work better – Isobaric

Answer 2

var name_of_var = document.getElementById('job').value;

then u get the selected value, if u want to set globally in javacsript then use this

 name_of_var = document.getElementById('job').value;

Distich

ok thanks. i have two functions in my save.js file would it be possible for you to help me split the code between the two? like the first line of codde you gave me would probably go into saveSettings function i have, but what would i do about the second one, loadSettings? like what would i code to make sure the selected value stays selected and doesn't revert back to the default? thanks again – Isobaric