Member Avatar for realmattbender

I am looking to do exactly what the title states. I have a radio field that i would like to persist across a page refresh. The following is my code:

<div id="RadioFields">
    <input type="radio" name="country" value="usa" id="usa" />USA
    <input type="radio" name="country" value="foreign" id="foreign" />Foreign Country
 <div id="countryerror">
  <div class="asterisk" runat="server">
    <asp:Label ID="lblCountry" runat="server" Visible="false" Text ="Please choose an option." >
    </asp:Label>
  </div>
 </div>
</div>
  • 3 Contributors
  • 2 Replies
  • 267 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

HTML is stateless (as noted), so the radio choice must be stored somewhere and re-applied on load. Two practical approaches that fit this thread:

  • Client-side (fast, no server changes): save the choice in localStorage (or sessionStorage if it should only last the browser tab session) and restore it on DOMContentLoaded. localStorage persists across reloads and restarts and is the easiest for a single-page fix. Cookies are an alternative when the server needs to read the value.

  • Server-side (ASP.NET Web Forms): persist the value in Session, a cookie, or a user-profile field and set the radio Checked state when the page is rendered. This is the right choice if the selection must follow a user between devices or be available to server code.

Example—client-only using localStorage:

document.addEventListener('DOMContentLoaded', function () {
  var radios = document.getElementsByName('country');
  var saved = localStorage.getItem('selectedCountry');
  if (saved) {
    for (var i = 0; i < radios.length; i++) {
      if (radios[i].value === saved) { radios[i].checked = true; break; }
    }
  }
  for (var i = 0; i < radios.length; i++) {
    radios[i].addEventListener('change', function () {
      localStorage.setItem('selectedCountry', this.value);
    });
  }
});

Example—server-side sketch for Web Forms (C#): read a cookie in Page_Load and set the server radio control, and write the cookie when the choice changes. Using an ASP:RadioButtonList or runat="server" RadioButtons simplifies wiring.

Notes and cautions: localStorage is not sent to the server and should not hold sensitive data. Use sessionStorage when persistence should be limited to the current tab. ’s comment about include() is about reuse of markup and doesn’t itself persist user selections; combine reusable UI with one of the storage strategies above for a complete solution.

Recommended Answers

All 2 Replies

Member Avatar for hericles

And what are you using? Because by itself HTML is stateless, you reload the page and it will draw itself as specified in the HTML, which in your case, is with neither radio button selected.
You would need either sessions, cookies or some other form of postback

Member Avatar for Taywin

If it is asp.net, you may be looking a functionality that has similar behavior to include in PHP (but not exact) here. In other words, create a generic file to be included in other files.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.