Refresh page after selecting radio button but keep the radio button value

css, html, javascript, jquery

Solution

If this is an HTML file, then use `localStorage` to store the `<input>` clicked by the `value` attribute and then when the page is loaded, run the `onclick` event of the right `<input>` element.

$(function() {
    $("input[type=\"radio\"]").click(function(){
        [...]
        //localStorage:
        localStorage.setItem("option", value);
    });
    //localStorage:
    var itemValue = localStorage.getItem("option");
    if (itemValue !== null) {
        $("input[value=\""+itemValue+"\"]").click();
    }
});

If this is run on a server, then use `document.cookie` to store the `<input>` clicked by the `value` attribute and when sending data to the client server-side, make the correct `<input>` checked and the correct box showing.

$(function() {
    $("input[type=\"radio\"]").click(function(){
        [...]
        //Cookies:
        document.cookie="option="+value;
    });
    //Cookies:
    /*Load the page with the correct input checked based off cookies*/
});

Here's the fiddle (unfortunately, cookies don't work here): http://jsfiddle.net/NobleMushtak/vTT7J/

Problem

I'm creating a page where the user can select an option by clicking on a radio button. I want the page to refresh keeping the selected radio button value. These are my codes. HTML ``` <div style="float:right"> <label><input type="radio" name="colorRadio" value="f1">Option 1</label><br> <label><input type="radio" name="colorRadio" value="f2">Option 2</label><br> <label><input type="radio" name="colorRadio" value="f3">Option 3</label><br> </div> <div style="float:left;" class="f1 box">This is option 1</div> <div style="float:left;" class="f2 box">This is option 2</div> <div style="float:left;" class="f3 box">This is option 3</div> ``` JAVASCRIPT ``` $('input[type="radio"]').click(function(){ if($(this).attr("value")=="f1"){ $(".box").hide(); $(".f1").show(); } if($(this).attr("value")=="f2"){ $(".box").hide(); $(".f2").show(); } if($(this).attr("value")=="f3"){ $(".box").hide(); $(".f3").show(); } }); ``` CSS ``` .box{ padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } ``` Is there a a way to reload just the div instead of refreshing the entire page?

Original source