CODEWITHSUNDEEP
javascriptjqueryhtmlcss
newbie
newbie

Reputation: 75

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

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?

Upvotes: 4

Views: 35235

Answers (9)

Likhitha
Likhitha

Reputation: 1

" class="fieldLabel" valign="middle">' key="label.portin.country" />:  

                    <nested:present name="VoyagerSession" property="accountSummaryInfo.mspSummaryInfo.countryList">
                    <html:select tabindex="7" size="1" property="country" styleClass="field"  onchange= "Javascript:getstateList();javascript:selectPortInType();"> 
                    <bean:define id="countrylist" name="VoyagerSession" property="accountSummaryInfo.mspSummaryInfo.countryList" type="java.util.List" />
                    <html:options collection="countrylist" property="key" labelProperty="value" />
                    </html:select>
                    </nested:present>  

                    </td>
                   <td width="20%" align="<%= session.getAttribute("pageRight")%>" class="fieldLabel" valign="middle"><bean:message bundle='<%=session.getAttribute("pageBundle").toString()%>' key="label.portin.state" />:&nbsp;</td>
                   <td width="30%" valign="middle" class="field">
                    <html:select size="1" property="state" styleClass="field"> 
                      <bean:define id="statelist" name="VoyagerSession" property="accountSummaryInfo.mspSummaryInfo.stateList" type="java.util.List" />
                      <html:options collection="statelist" property="key" labelProperty="value" />
                      </html:select>
                   </td>
                </tr>

Upvotes: -2

user10651393
user10651393

Reputation: 1

Your JSP looks like this

<input type="radio" id="aa" name="Options" value="val1">radio 1
<input type="radio" id="bb" name="Options" value="val2"> radio 2
<input type="radio" id="cc" name="Options" value="val3"> radio 3

jQuery

$(function() {
    $("input[type=\"radio\"]").click(function(){
        var thisElem = $(this);
        var value = thisElem.val();
   alert('value'+value);
        localStorage.setItem("option", value);

    });
    var itemValue = localStorage.getItem("option");
    if (itemValue !== null) {
        $("input[value=\""+itemValue+"\"]").click();
    }

});

On load of page radio button will not reset as your using local storage to retrieve.

This will solve the issue

Upvotes: 0

Noble Mushtak
Noble Mushtak

Reputation: 1784

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/

Upvotes: 3

user3218194
user3218194

Reputation: 458

For refreshing the page, you can use in jquery location.reload(). For storing the radio button value which is clicked, you need to store the data in the local storage if you are not using server.

Upvotes: 0

Abhijeet Panwar
Abhijeet Panwar

Reputation: 1857

As your page will be refreshed new components will be created you can't persisit their value directly by using javascript , the value needs to be stored somewhere from where you can get your values later and reset value in your new radio button element.

In other words you want to save states of your objects in web application.For purpose of Maintaining state of object we have many methods as we often use request scope, Quesy String or a session.As your requirement is to save value only till next request(next page refresh) so for this purpose of maintaining that value for next page load you can use request scope or you need to add that value to your query string,in both of the ways you can get that value from request scope or query string and apply that value to your radio button.

How do I pass data between JavaScript pages?

  1. Submitting form data to a server-side script that then outputs a new JavaScript page containing the data. This is simple and reliable and works in all browsers, but requires support for server-side scripting of some kind (PHP, ASP, etc).

  2. Passing form-style data in a URL to a new JavaScript page, without using any server-side scripts. This works in all browsers but supports a limited amount of data. It is the traditional way of solving the problem without server-side scripting.

  3. Passing data via the window.name property. Although this is not the intended purpose of window.name, it seems to work quite well and supports larger amounts of data than the second method. And it works in Safari, Firefox, and Internet Explorer. So why not use it? Because it is highly insecure! If the user follows a link to another website that doesn't belong to you, that other website can still see the data stored in window.name, which was never meant to be a secure, site-specific property. So I strongly discourage the use of this method.

Upvotes: 0

SVSchmidt
SVSchmidt

Reputation: 6517

Here's my solution to your problem: Fiddle

I used the localStorage to save which radioButton is checked with a fallback to cookies:

function saveData(key,value) {
   localStorage.setItem(key,value) || (document.cookie = key + "=" + value);
}

On page load, the data is loaded from the used storage to check the belonging button and to activate the appropriate box.

Plus I simplified your function setting the active box.

If you have any questions, feel free to ask.

Upvotes: 0

iamawebgeek
iamawebgeek

Reputation: 2865

Load by $("#divWhichExcludesRadiobutton").load("current/url"); or add next script in the head tag

var myVal;
$("body").load("current/url", function () { $('input[type="radio"]').val(myVal) });
$('input[type="radio"]').on('change',function(){
       myVal = $(this).attr("value");
       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();
       }
});

Upvotes: 0

Umair Hamid
Umair Hamid

Reputation: 3557

You can set the cookie when select radio button and then refresh the page. When page loads again read the cookie value and select radio button according to cookie value.

Upvotes: 0

Vlas Bashynskyi
Vlas Bashynskyi

Reputation: 2014

add autocomplete='on' attribute to your input field.

Upvotes: 1

Related Questions