Skip to main content

Smart JavaScript/hidden radio button to disable browser back button

Note: please post a one liner if this post was helpful to you.

I am finally able to figure out how to code a smart tag to disable the browser back button for quiz’s.

I searched long and hard to find a similar solution but never was able to find one but now it seems I have the perfect solution where it blocks users from hitting the back button in the browser and changing their answers in the quiz questions by selecting a different radio button from previous submit action.

This solution basically is half JavaScript and half programming as the programming code pulls the data from a pool of questions and JavaScript looks for a hidden field and if it has been initialized already or not, if the value was initialized on load than the value is retained when the user clicks the back button thus JavaScript knows that value exists and reloads the page.

The trick is simple yet it looks so complex and it retains the forward button as well because the page was just refreshed.

What I learned is that window.onload function gets triggered even when the user clicks the back button so it’s no help, but the radio button values don’t get refreshed and it becomes easy to figure out if any or a particular radio button that is required for the form to get submitted is already selected or not, if it’s selected right when the JavaScript is still loading that means the browser back button is selected and if not just process like normal.

example:

function reloadIfBrowserBackButtonClick()
{
  //sample by blog.wasay.net
  if (document.getElementById(“sampleRequiredCheckbox”).checked==true)
  {
    window.reload();
  }
}
window.onload=reloadIfBrowserBackButtonClick;

Make sure you check the radio button after the page is loaded otherwise you will get a JavaScript error.

Have fun coding.

~Wasay