取消选中页面刷新时的单选按钮 [英] Uncheck radio button on page refresh
问题描述
我有两个单选按钮，可以调用两个不同的登录脚本单选按钮1用于零售网上银行，单选按钮2用于商业网上银行。除非页面刷新，否则一切正常。如果您在刷新页面时为商业网上银行选择单选按钮2，单选按钮2将保持选中状态，但它正在调用零售网上银行的登录脚本，因此使用商业网上银行登录凭据将不起作用。
如果刷新页面时单选按钮1可能是默认值，或者根本没有检查任何单选按钮，那就太好了。这些选项中的任何一个都可以实现吗？
我尝试过：
这是我的代码。
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>
推荐答案
根据此StackOverflow主题 [ ^ ] ，在输入上设置autocomplete =off应该可以防止这种行为。
According to this StackOverflow thread[^], settingautocomplete="off"on your inputs should prevent this behaviour.
<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>
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.
这篇关于取消选中页面刷新时的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
