CODEWITHSUNDEEP
jquerycookiesradio-buttoncheckbox
Sweepster
Sweepster

Reputation: 1949

remember radio button selections

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?

Upvotes: 2

Views: 5793

Answers (3)

Joseph Silber
Joseph Silber

Reputation: 220076

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.

Upvotes: 11

smitec
smitec

Reputation: 3049

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.

Upvotes: 0

legendofawesomeness
legendofawesomeness

Reputation: 2911

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.

Upvotes: 0

Related Questions