Member Avatar for varma51 
<form method="post" action="#">
<table>

<tr>

 <td></td>
<td><input name=cars type=radio value=a>Volkeswagon</td>
<td><input name=cars type=radio value=b>Ford</td>
<td><input name=cars type=radio value=c>Honda City</td>
<td><input name=cars type=radio value=d>Renault</td>
</tr>
<tr><td> <input type="submit" value="submit"></td></tr>
</form>

Quoted Text Here

so when i did page refreshing after the radiobutton selection.the radiobutton can display as unchecked.
can u please help me to display the radiobutton as checked even after page refreshing...thanks to all.

  • 4 Contributors
  • 5 Replies
  • 829 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by gon1387

Dani AI

Generated

A reliable, maintainable solution is to persist the chosen radio value and restore it when the page loads instead of trying to block the browser refresh. is correct that the browser will not always keep form state on a full reload, but the state can be explicitly saved client-side (localStorage/sessionStorage/cookie) or server-side and then re-applied on load. pointed to the right idea — below is a minimal client-side pattern that is simple to apply.

<script>
document.addEventListener('DOMContentLoaded', function () {
  const storageKey = 'cars-selected';
  const radios = document.querySelectorAll('input[type="radio"][name="cars"]');

  // restore saved choice
  const saved = localStorage.getItem(storageKey);
  if (saved) {
    const match = Array.from(radios).find(r => r.value === saved);
    if (match) match.checked = true;
  }

  // save on change
  radios.forEach(r => r.addEventListener('change', function () {
    if (this.checked) localStorage.setItem(storageKey, this.value);
  }));
});
</script>

Notes and troubleshooting:

  • Use sessionStorage instead of localStorage when persistence should be limited to the browser tab. localStorage persists across tabs and browser restarts until cleared.
  • Make sure the name and value attributes are stable and identical each load; if values change, the restore cannot match.
  • Run the restore after the DOM is ready (or place the script at the end of body) so inputs exist when the script runs.
  • For server-driven pages (form submit → new page), save the choice on the server and render the checked attribute when generating the HTML for best consistency and accessibility.
  • Avoid disabling the refresh key (keycode hacks). They are brittle, break expected browser behavior, and harm usability and accessibility.

This approach is small, cross-browser in modern environments, and keeps UX predictable while letting keep the selected radio checked after refresh.

Recommended Answers

All 5 Replies

Member Avatar for urtrivedi

if you press browser refresh button it is not possible to retain values.

Member Avatar for ratanji

hi urtrivedi.ya wat you said was right..is it posible for disabling browser refresh button using java script.

Member Avatar for gon1387

You can use HTML5's localStorage/ Cookie if you want it to be retained. you can do the following steps

  1. Passively/Actively save the option value to localStorage/cookie
  2. Refresh
  3. Check which radio button was selected, then put a "checked" tag
Member Avatar for gon1387

Here's some reference to get you up and running:

Flash File Storage

Member Avatar for gon1387

Hi ritanji,
It's possible to disable the refresh button. You can filter it on the keydown event, it has a keycode of 116.

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.