Uncheck radio button on page refresh

Question

0.00/5 (No votes)

See more:

I have two radio buttons that call up two different login scripts radio button 1 for Retail Online Banking and radio button 2 for Business Online Banking. Everything is working fine except when the page is refreshed. If you select radio button 2 for Business Online Banking when the page is refreshed, radio button 2 stays checked but it is calling the login script for Retail Online Banking therefore using Business Online Banking login credentials will not work.

If radio button 1 could be the default when the page is refreshed or not have any radio buttons checked at all would be nice. Are either one of these options achievable?

What I have tried:

Here is my code.

<html>
<head>
</head>

<body>

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

<br>
<br>

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

<div class="inner_div">
<div id="Div1">


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


  
<label alt="Enter User Name" 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", "Div3", "Div4"];
    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[i];
        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>

Posted 26-Nov-18 8:02am

Ike Evens

Updated 27-Nov-18 7:16am

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2018-11-27T03:32:00

According to this StackOverflow thread[^], setting autocomplete="off" on your inputs should prevent this behaviour.

HTML

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

Ike Evens · Answer 2 · 2018-11-27T07:17:00

Well, I found that and thought the same thing, but it does not work on page refresh using IE. Other browsers provide different results.

Here is what I have found.

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 then page refresh.

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

Chrome everything works as it should.

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.

I've tried the autocomplete="off", checked="false", checked="unchecked" and various javascripts and jQuery + javascripts and nothing seems to work for IE and the other browsers.

Seems if I delete browsing history it works or page load by highlighting the address bar and hit enter it works.

I think informing our business customers of the situation maybe the best solution at this point.

Uncheck radio button on page refresh

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Uncheck radio button on page refresh

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us