How to retain radio input state on page refresh

Question

i have a form on which i need to store the state of all radio buttons if a user submit the form with errors (which in case the page would refresh).

I want to achieve something quite similar to this:

$(function(){
        $('.example input[type="radio"]:checked').each(function(){
        $(this).attr("checked",true);
    });

Any help would much be appreciated!

You'll need to use cookies or HTML 5 local storage, or have the server generate new HTML based on the `POST` data. Lots of options, pretty common problem. What's your server-side technology? — Yuck, Sep 23 '13 at 13:02
using any kind of persistent data client side as cookie or localStorage — A. Wolff, Sep 23 '13 at 13:02
Look here, I think this old post can help you http://stackoverflow.com/questions/16206322/how-to-get-js-variable-to-retain-value-after-page-refresh — BENARD Patrick, Sep 23 '13 at 13:02

score 5 · Accepted Answer · answered Sep 23 '13 at 13:02

5

You could store it's state within local storage and restore it after each page load.

Little example on storing the value:

$('#myCheckbox').click(function () {
    localStorage['my.checkbox'] = this.checked;
});

Restore it:

$('#myCheckbox').prop('checked', localStorage['my.checkbox'] == 'true');

answered Sep 23 '13 at 13:02

Bart

Could you please help with the coding. I have added myformID to the onclick, but doest seem to work.. – Wasiim Sep 23 '13 at 13:22
And yes, there are about 20 radio buttons on that form :) – Wasiim Sep 23 '13 at 13:23
You will need to bind the click event to the radio element so you can save it's checked state on each click. You will need write another little script to restore those values on load. – Bart Sep 23 '13 at 13:37
can you please advise what i did wrong in this code, since it is not working: if(Modernizr.localstorage){ $('input[type="radio"]).click(function(){ localStorage["key"] = this.checked; }); $('input[type="radio"]').prop('checked' localStorage["key"]=='true'); } – Wasiim Sep 24 '13 at 06:48
I can tell you missed a `,` between the arguments in `prop()`. – Bart Sep 24 '13 at 06:59
i've put the "," but no real success :( – Wasiim Sep 24 '13 at 07:25
Since there are many input radios, is a loop not needed here? – Wasiim Sep 24 '13 at 07:30
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/37924/discussion-between-bart-and-wasiim) – Bart Sep 24 '13 at 08:03
I managed to get it working, had to make a tweak with my selector. However, i have one issue now, the if i refesh the page multiple times(if i submit the form multiple time with errors), only the state of the FIRST submit is retained! – Wasiim Sep 24 '13 at 08:14

score 0 · Answer 2 · edited Sep 23 '13 at 13:02

0

Maybe you store the information in the session token or in a session cookie. If you use html5 components, you might try to use html local storage.

edited Sep 23 '13 at 13:02

Yuck

answered Sep 23 '13 at 13:02

Tobonaut

score 0 · Answer 3 · answered Sep 23 '13 at 13:07

you just need to update the code

$(function(){
        $('.example input[type="radio"]').each(function(){
           $(this).attr("checked",$(this).checked());
    });

It will save the property of radio button as user has selected for the radio button.

3 Answers3