How to remember a selected radio button after page refresh

Question

I'm using the localstorage idea mentioned in a previous post: remember radio button selections

Their jfiddle example works fine, however when I incorporate the same code (see below) into a web page on my local host, the new selection doesn't work after the page is refreshed. I'm referencing the latest jquery library - http://code.jquery.com/jquery-latest.js

I'd be grateful for any suggestions. I'm sure it's something simple I'm missing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(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})
        );
    });
});

</script>

</head>

<body>

<form method="post">
<input type="radio" name="foo" id="foo1" />foo1<br />
<input type="radio" name="foo" id="foo2" />foo2<br />
<input type="radio" name="bar" id="bar1" />bar1<br />
<input type="radio" name="bar" id="bar2" />bar2<br />
</form>

</body>

Are you using the exact same code as in the jfiddle example? If you don't post any code it is really hard to help. — The Jonas Persson, Jun 22 '12 at 02:07
What is your EXACT code? We can't guess what you've done wrong, we have to analyze your ACTUAL code. — jfriend00, Jun 22 '12 at 02:09
I *think* HTML5's `localStorage` won't work in most browsers if you don't add the HTML5 `doctype`. — Fabrício Matté, Jun 22 '12 at 02:19

Fabrício Matté · Accepted Answer · 2012-06-22T02:40:04.537

1

Try with a proper HTML5's doctype:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
...

Most browsers will render the page as older [X]HTML instead of HTML5 if you don't include the proper HTML5 doctype, as specified by W3C (Chrome is often an exception to the rule, though).

Also, as you're apparently using Adobe DreamWeaver, don't forget to uncheck the "include BOM signature" and select "none" as your normalization dictionary in DW's Save As menu. This will prevent it from adding junk bits in the start of the document which may also break your <!DOCTYPE html> which must start in the very first byte of the page's HTML data received by the browser.

edit: JSFiddle automatically adds your code to a valid HTML5 page, that is why it works perfectly fine there. You can check it by right-clicking the rendered page's frame and selecting This Frame > View Frame Source in Firefox (similar methods for Chrome and IE).

Also note that localStorage is not supported in IE < 8. Check the MDN page if you need cross-browser compatibility with older versions of IE.

edited Jun 22 '12 at 02:40

answered Jun 22 '12 at 02:27

Fabrício Matté

69,329
26
129
166

Thanks - that's good advice. Unfortunately, updating the doc type didn't fix the problem, so I ended up inserting the rendered page source code (inside the frame) and this works fine. Funny thing is, this code looks identical to my initial code. So there must be a glitch inside the javascript, but I can't find what it is. Thanks again. – mojobullfrog Jun 22 '12 at 03:49
No problem. `=]` Many things can trigger the Quirks mode, and if you think it's your JS' fault you can usually check the JS error console - F12 in Chrome/IE, Ctrl+Shift+K in Firefox (or F12 with Firebug installed). Glad to be of help. `:)` – Fabrício Matté Jun 22 '12 at 03:51
Furthermore, what would be the best method for retrieving the id of the selected radio button? There doesn't seem to be many concise tutorials on localstorage, which is probably why I'm still yet to grasp it fully. – mojobullfrog Jun 23 '12 at 01:47
Depends how you stored it. `this.id` should suffice if you're iterating through the stored radios, I can take a closer look if you need. – Fabrício Matté Jun 23 '12 at 01:49
That would be great if you could. For simplicity, let's just assume all radio buttons share the same name - ie. "foo". If that's the case, I'm assuming a basic loop would do the trick. What I'm not sure about is how to store the selected radio id as a js variable. – mojobullfrog Jun 23 '12 at 02:08
1

@user1267980 Not sure if this is exactly what you are looking for, but I edited the linked answer's fiddle adding some comments as well: [Fiddle](http://jsfiddle.net/ult_combo/PgxPp/16/). In this fiddle, I get the checked radio and alert its id. =] – Fabrício Matté Jun 23 '12 at 02:16
That is exactly what I was looking for. Thanks so much Fabricio, your help is truly appreciated. I can now edit my own web development accordingly. – mojobullfrog Jun 23 '12 at 02:41

How to remember a selected radio button after page refresh

1 Answers1