remember radio button selections

Question

I have the following code that works perfectly. It allows the user to 'like' or 'dislike' each post with radio buttons. The checkboxes are switches that allow the user to show/hide all liked or disliked posts.

The problem is, I need the page to remember the radio button selections when the user leaves and returns. Would this require cookies? If so, how do i implement it?

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unhide on checkboxes/radio buttons</title>
    <link rel="stylesheet" type="text/css" href="_styles.css" media="screen" />
    <script type="text/javascript">

function radioGroupValue(groupObj)
{
    //Check if there is only one option (i.e. not an array)
    if (!groupObj.length)
    {
        return (groupObj.checked) ? groupObj.value : false;
    }

    //Multiple options, iterate through each option
    for (var i=0; i<groupObj.length; i++)
    {
        if (groupObj[i].checked)
        {
            return groupObj[i].value;
        }
    }

    //No option was selected
    return false;
}


function toggleLayer(formObj)
{
    var showLikes = document.getElementById('show_likes').checked;
    var showDislikes = document.getElementById('show_dislikes').checked;

    var postIndex = 1;
    while(document.getElementById('post_'+postIndex))
    {
        var liked = radioGroupValue(formObj.elements['like_'+postIndex])
        var display = ((!showLikes && liked==='1') || (!showDislikes && liked==='0')) ? 'none' : '';
        document.getElementById('post_'+postIndex).style.display = display;
        postIndex++;
    }
}
</script>
</head>
<body>

<form action="" method="post">
    <fieldset>
        <legend>Unhide Layer Form</legend>
        <ul>
            <p><input id="show_likes" name="show_likes" type="checkbox" value="1" checked="checked" onclick="toggleLayer(this.form);" /><label for="b1">Show Likes:</label> </p>
            <p><input id="show_dislikes" name="show_dislikes" type="checkbox" value="1" checked="checked" onclick="toggleLayer(this.form);" /><label for="b1">Show Disikes:</label> </p>
        </ul>

    <label>Email:</label>

        <input type="email" />  
    </fieldset>
<br><br>

    <fieldset>
        <legend>Posts</legend>

<div id="post_1" class="post">
    <b>Post #1</b><br>
    Content of post #1<br>
    <p><input type="radio" name="like_1" value="1"><label for="like1a">Like</label></p> <p><input type="radio" name="like_1" value="0" onclick="toggleLayer(this.form);"><label for="like1b"> Dislike</label></p>
</div>
<div id="post_2" class="post">
    <b>Post #2</b><br>
    Content of post #2<br>
    <p><input type="radio" name="like_2" value="1"><label for="like2a">Like</label></p> <p><input type="radio" name="like_2" value="0" onclick="toggleLayer(this.form);"><label for="like2b"> Dislike</label></p>
</div>
<div id="post_3" class="post">
    <b>Post #3</b><br>
    Content of post #3<br>
    <p><input type="radio" name="like_3" value="1"><label for="like3a">Like</label></p> <p><input type="radio" name="like_3" value="0" onclick="toggleLayer(this.form);"><label for="like3b"> Dislike</label></p>
</div>
<div id="post_4" class="post">
    <b>Post #4</b><br>
    Content of post #4<br>
    <p><input type="radio" name="like_4" value="1"><label for="like4a">Like</label></p> <p><input type="radio" name="like_4" value="0" onclick="toggleLayer(this.form);"><label for="like4b"> Dislike</label></p>
</div>
<div id="post_5" class="post">
    <b>Post #5</b><br>
    Content of post #5<br>
    <p><input type="radio" name="like_5" value="1"><label for="like5a">Like</label></p> <p><input type="radio" name="like_5" value="0" onclick="toggleLayer(this.form);"><label for="like5b"> Dislike</label></p>
</div>
<div id="post_6" class="post">
    <b>Post #6</b><br>
    Content of post #6<br>
    <p><input type="radio" name="like_6" value="1"><label for="like6a">Like</label></p> <p><input type="radio" name="like_6" value="0" onclick="toggleLayer(this.form);"><label for="like6b"> Dislike</label></p>
</div>
<div id="post_7" class="post">
    <b>Post #7</b><br>
    Content of post #7<br>
    <p><input type="radio" name="like_7" value="1"><label for="like7a">Like</label></p> <p><input type="radio" name="like_7" value="0" onclick="toggleLayer(this.form);"><label for="like7b"> Dislike</label></p>
</div>
</form>

Any pointers?

How important is your data? How long does it need to persist? If your application goofs up and loses the data, will that be a problem? Is your application a convenience for the user not something really important? — Evik James, Aug 25 '11 at 23:49
it is fairly important for the user. The information should not be lost in any circumstance. — Sweepster, Aug 26 '11 at 16:50
Don't use cookies, in that case; users clear their histories, move to different browsers and other things, to name but a few reasons why cookies aren't good for storing important data. — Bojangles, Aug 28 '11 at 15:37

Joseph Silber · Answer 1 · 2012-04-05T17:23:15.263

11

You can use localstorage:

$(function()
{
    $('input[type=radio]').each(function()
    {
        var state = JSON.parse( localStorage.getItem('radio_'  + this.id) );

        if (state) this.checked = state.checked;
    });
});

$(window).bind('unload', function()
{
    $('input[type=radio]').each(function()
    {
        localStorage.setItem(
            'radio_' + this.id, JSON.stringify({checked: this.checked})
        );
    });
});

localstorage is supported in all modern browsers, including IE8.

For older versions of IE, you can add support easily (before the above script).

Here's the fiddle. Play around with the radio buttons, close the window, then re-open it (or just refresh). You'll see that they retain their state.

edited Apr 05 '12 at 17:23

answered Aug 25 '11 at 23:41

Joseph Silber

214,931
59
362
292

I tried using this code but it doesn't work... when refreshing the page, all the buttons reset. – Sweepster Aug 26 '11 at 00:04
@Jonathan: Which browser (and which version) did you test it in? – Joseph Silber Aug 26 '11 at 06:57
@Jonathan: You're right. My mistake. I had some errors in that code. I've updated my answer, and included a fiddle. – Joseph Silber Aug 28 '11 at 15:36
@Joseph I was completely unaware that IE8 supported localstorage. Also, thanks very much for the – Bojangles Aug 28 '11 at 15:38
@JamWaffles: My bad. I forgot to check if `localStorage` has indeed returned an object. I updated the code above, as well as the fiddle. Let me know if it works for you now. – Joseph Silber Aug 28 '11 at 15:46
@Joseph "Fine and dandy" comes to mind when commenting on the working-ness of your JSFiddle ;-) – Bojangles Aug 28 '11 at 15:47
Sorry for the delay, I've been distracted these past couple of days. I'll have a try witht his and get back to you tomorrow. – Sweepster Aug 30 '11 at 23:58

score 0 · Answer 2 · answered Aug 25 '11 at 23:39

0

Instead of cookies, a better approach would be to implement this as a database solution. Cookies can be deleted and thus this will become a inconsistent solution. If your desire it to persist this selection for as long as the user is active in your system, then save you user selection in the database and implement your rendering logic around their save likes & dislikes.

answered Aug 25 '11 at 23:39

legendofawesomeness

2,901
2
19
32

A database is a better approach? That's like saying the space shuttle is better than taking the city bus. A database would be TOTAL overkill for this simple issue. Cookies would be good. Local storage would be better. – Evik James Aug 25 '11 at 23:44
@Evik - So you are saying that I make 100 dislikes at my office and then login from my home, I'll see all my dislikes - even though I said that I dislike them. Similary, I disklike few 100 things and then I clear my browser cache (not sure what would happen to localstorage, but cookies are gone for sure), and voila...my dislikes are back...that's a pretty awesome user experience! Isn't it? Try it out. :) – legendofawesomeness Aug 25 '11 at 23:49
It depends on the application. If it's the type of application that will be used from one location or irregularly or has unimportant data, then cookies are much more appropriate. I don't think the question clearly outlines anything that requires a database. Of course, I could be wrong. It seems obvious though that the guy asking the question is looking for short term, low level data persistence, not long term data storage. And, most people don't have access to databases. – Evik James Aug 25 '11 at 23:55
It's true I would prefer a solution that does not use a database as the amount of work required to be implemented is outrageous considering this is just an on/off switch. – Sweepster Aug 26 '11 at 03:15
The solution provided however doesn't function. Adding it to my code kills the checkbox functions and nothing hides anymore. The selections also don't get stored when refreshing, only when pressing back and forward... any solutions? – Sweepster Aug 26 '11 at 03:22

score 0 · Accepted Answer · answered Aug 25 '11 at 23:42

If you want others to see the likes (as in a count) look into using AJAX to send the data to a storage database somewhere. This was it can be loaded with the page. If you are only interested in storing the individual users choices I would still recommend AJAX but instead of saving a counter save the yes/no answer for each user and post into a table in a database. To save space it would be better perhaps to only store the yes answers and assume the others to be a no.

remember radio button selections

3 Answers3

Linked