Question

139

Saving dropdown menu selection in a cookie?

rated 0 times [ 146] [ 7] / answers: 1 / hits: 21492 / 12 Years ago, sat, june 9, 2012, 12:00:00

I've seen this posted a few times, but I wasn't able to get the code working at all.
I need help making this drop down menu save its settings to a cookie, so when the user visits the site again, their previous selection is retained.

Dropdown:

<select id=ThemeSelect>

    <option value=zelda>Zelda</option>

    <option value=smb2>SMB 2</option>

</select>

For reference, this code is with some Javascript in a Wordpress widget that changes the css code, like a theme selector.

How would I make this save as a cookie? I feel like I've tried everything!

EDIT:
I should have said, but I use this code to change the CSS:

var saveclass = null;

var sel = document.getElementById('ThemeSelect');

sel.onchange = function(){

    saveclass = saveclass ? saveclass : document.body.className;

    document.body.className = saveclass + ' ' + sel.value;

};

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hasanjustusf

Add To Favorites

Follow

Total Points: 76

Total Questions: 116

Total Answers: 100

Location: Virgin Islands (U.S.)

Member since Tue, Jul 7, 2020

4 Years ago

hasanjustusf questions

1 Uncaught TypeError: Cannot read properties of null (reading useRef)

Wed, May 25, 22, 00:00, 2 Years ago

1 Displaying a success or error message in React JS upon form submit

Fri, Feb 26, 21, 00:00, 3 Years ago

1 I want to get selected value from select options on button click in react.js

Wed, Nov 4, 20, 00:00, 4 Years ago

1 Vuelidate custom validation function in Vue.js

Thu, Jan 16, 20, 00:00, 4 Years ago

1 How to import TokenExpiredError thrown by jsonwebtoken's verify?

Fri, May 24, 19, 00:00, 5 Years ago

View All

answered 12 Years ago ninaemiliaj · Accepted Answer

Something along these lines should work for you. The function to create a cookie via javascript was found in
Setting a Cookie from JavaScript, a post on javascripter.net.

HTML:

<select id=ThemeSelect onchange=setCookie('theme', this.value, 365);>

    <option value=zelda>Zelda</option>

    <option value=smb2>SMB 2</option>

</select>

Javascript:

function setCookie(cookieName, cookieValue, nDays) {

    var today = new Date();

    var expire = new Date();



    if (!nDays) 

        nDays=1;



    expire.setTime(today.getTime() + 3600000*24*nDays);

    document.cookie = cookieName+=+escape(cookieValue) + ;expires=+expire.toGMTString();

}

Edit:

Save the cookie

I have merged the two functions into one for you.

HTML:

<select id=ThemeSelect onchange=saveTheme(this.value);>

    <option value=zelda>Zelda</option>

    <option value=smb2>SMB 2</option>

</select>

Javascript:

var saveclass = null;



function saveTheme(cookieValue)

{

    var sel = document.getElementById('ThemeSelect');



    saveclass = saveclass ? saveclass : document.body.className;

    document.body.className = saveclass + ' ' + sel.value;



    setCookie('theme', cookieValue, 365);

}



function setCookie(cookieName, cookieValue, nDays) {

    var today = new Date();

    var expire = new Date();



    if (nDays==null || nDays==0)

        nDays=1;



    expire.setTime(today.getTime() + 3600000*24*nDays);

    document.cookie = cookieName+=+escape(cookieValue) + ;expires=+expire.toGMTString();

}

Live DEMO

Read the cookie on return to the page

Thanks to dunsmoreb

We can get the cookie using this function, shamelessly stolen from this question.

function readCookie(name) {

  var nameEQ = name + =;

  var ca = document.cookie.split(';');

  for(var i = 0; i < ca.length; i++) {

    var c = ca[i];

    while (c.charAt(0) == ' ') c = c.substring(1, c.length);

    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);

  }

  return null;

}

Then we need to select the value when the page loads. The following code will accomplish just that:

document.addEventListener('DOMContentLoaded', function() {

    var themeSelect = document.getElementById('ThemeSelect');

    var selectedTheme = readCookie('theme');



    themeSelect.value = selectedTheme;

    saveclass = saveclass ? saveclass : document.body.className;

    document.body.className = saveclass + ' ' + selectedTheme;

});

Live DEMO