CODEWITHSUNDEEP
javascriptradio-buttonselected
Kiran Baroliya
Kiran Baroliya

Reputation: 13

How can persist value of radio button after refreshing page using javascript?

We want get selected value of radio button after refreshing page. We have two radio button like Online & Offline. If I select Online and then after refreshing page at that time I want selected value of radio button back.

Upvotes: 0

Views: 2078

Answers (2)

Awanish
Awanish

Reputation: 367

Use Local storage.

localStorage.setItem('some key',radiobuttonValue); //To set values

localStorage.getItem('some key'); // To get values

These values will be stored on your browsers storage. Note that this doesnt work if user clears the cache.

Upvotes: 0

Alok
Alok

Reputation: 522

You can use following things :-

1) localStorage -HTML5

2) cookies ..

I would recommend using localStorage

before refreshing page set local storage:-

localStorage.setItem('radioBtnId',valSelected);
//valSelected is the selected value of radiobutton.

and after refreshing page, do

var val=localStorage.getItem('radioBtnId');

and use val to default select the radioButton.

Also delete the localstorage value because you don't need it any more as:

localStorage.removeItem('radioBtnId');

Adding code as given in the comment

<html>
  <head> 
      <script>          
          function setDefaultValue(id)
          {
            localStorage.setItem('status',id);
          }

          function getDefaultValue()
          { 
            var valId=localStorage.getItem('status'); 
            document.getElementById("valId").checked = true;
            localStorage.removeItem('status');
          }
      </script>
      <title>
      </title>
      </head>

      <body>
        <form>
          <input id="statusOnline" type="radio" value="Online"  onchange="setDefaultValue('statusOnline');">       
          <input id="statusOffline" type="radio" value="Offline"  onchange="setDefaultValue('statusOffline');">
      </form>
      </body>
</html>

haven't tested this code .. just giving you the Idea how it will be used . Hope it helps ...

Upvotes: 3

Related Questions