Jump to content

Radio Button Checked by Default on Page Refresh

ike

By ike
in General

 Share

Recommended Posts

ike Newbie

ike

Posted
Posted

Is there any way to have a radio button be active by default on page refresh?

I have two radio buttons that call up two different login scripts.  Login script one for retail customers does not require a token to authenticate, where login script two for business customers has a token to authenticate.  When script two is activated it provides a link to retrieve a lost or damaged token.  The problem I’m running into is that once radio button two is checked and the page is refreshed radio button two stays checked. However, it is calling up login script one without the link to retrieve a lost or damaged token.    

I've tried using autocomplete="off", checked="false", checked="unchecked" and various javascripts and jQuery + javascripts and nothing seems to work for IE and some other browsers.  Chrome everything works as it’s supposed to.

Here is what I have found.

Chrome everything works as it should.  If you check radio button two and do a page refresh or page load it defaults back to radio button one.

Internet Explorer nothing works unless I delete browsing history after selecting radio button two or highlight the address bar contents and hit enter which I consider a page load rather than page refresh.

Firefox works like Internet Explorer, page refresh does nothing, page load puts the tick back on radio button one.

Microsoft Edge works a little differently.  On page refresh, the tick is on radio button one for a split second then disappears leaving both radio buttons unchecked. Page load puts the tick back on radio button one.

 

Here is my code if it helps.

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<html>
<head>

 


</head>

<body>


<label><input type="radio" name="app" checked onclick="divVisibility('Div1');"/>Retail Online</label>
<label><input type="radio" name="app"  onclick="divVisibility('Div2');"/>Business Online</label>

<br>
<br>

<div class="inner_div">
<div id="Div1">
<!--------------- START RETAIL ONLINE BANKING LOGIN --------------->

<form method="POST" action="https://web9.secureinternetbank.com">


 
<label alt="Enter User Name" autocomplete="off" name="Enter User Name" style="position: absolute; z-index: -1;" for="username"></label>
<input type="text" width="100px" placeholder="User Name" alt="User Name Field" name="username" id="username">

<br>
<br>

<label style="position: absolute; z-index: -1;" for="password"></label><input
type="password" width="100px"  placeholder="Password" name="password" id="password" >


 <br>
 <br>
 
<input type="submit" value="Login">

</form>
</div>
</div>

 
 
 <script>

var divs = ["Div1", "Div2"];
    var visibleDivId = null;
    function divVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
     
   hideNonVisibleDivs();
    }
      }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs;
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "";
        } else {
          div.style.display = "none";
        }
      }
 }

</script>

</DIV>

<!--------------- START BUSINESS ONLINE BANKING LOGIN --------------->

 

<div id="Div2" style="display: none;">

<form method="POST" action="https://web9.secureinternetbank.com" id="ebc-form">
 
<input type="text" placeholder="User Name" name="username" id="ebc-username">

<br>
<br>

 <input type="password" placeholder="Password" name="password" id="ebc-password">

<br>
<br>

<input type="submit" value="Login" id="ebcsubmit">

</form>

<a href='https://web9.secureinternetbank.com/' style="text-decoration: none">
<p>Lost or Damaged Token</p></a>

<script type="text/javascript" src="https://web9.secureinternetbank.com/"></script>

<script>
 var submitCallback = function() {
  console.log("submit");
 }

 var errorCallback = function() {
  console.log("error");
 }

</script>

 

</body>
</html>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

You should use sessionStorage or cookie to record when they select one of the buttons, and on page load you need to check which button should be selected and run the associated Javascript that would run when they select the button.  The browser may keep the selection on the form control, but it's not going to automatically run the click event again on refresh.

Link to comment
Share on other sites
ike Newbie

ike

Posted
  • Author
Posted (edited)
1 hour ago, justsomeguy said:

You should use sessionStorage or cookie to record when they select one of the buttons, and on page load you need to check which button should be selected and run the associated Javascript that would run when they select the button.  The browser may keep the selection on the form control, but it's not going to automatically run the click event again on refresh.

Not really sure what any of that means but I'll do a search on sessionStorage and see what I can come up with. 

Thanks!

Edited by ike
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...