Objective: Understand a Javascript related IE compatibility problem.
Question: Why does my Javascript break in IE and nowhere else (besides "IE sucks," haha) and is there an easy fix.
Details: I have a payment system that allows the user to select between 3 payment methods (via html radio buttons) and uses Javascript to display the appropriate form to complete payment. In chorme and firefox it works perfectly.
In IE however, once the initial radio button is clicked and the Javascript displays the appropriate div the cursor jumps to the lower middle of the page and the user cannot click on any of the input boxes in the form.
The boxes can be reached if the user right clicks on them, but not easily. There are a variety of ways I can get around this, but I'm trying to understand what causes the problem in IE. Especially if it's poor coding on my part. Also, if there is an easy fix to the existing code I'd be interested in hearing it.
index.phtml
<form name="payo" action="/paymentAction/" method="post" >
<div id="tabs">
<div id="nav">
<input type="radio" name="tab" class="div1" value="Inv" /> Invoice <input type="radio" name="tab" class="div2" value="CC" /> Credit Card <input type="radio" name="tab" class="div3" value="Cpn"/> Coupon
</div>
<div id="div1" class="tab">
<!-- INVOICE TEXT -->
</div>
<div id="div2" class="tab">
<!-- CREDIT CARD FORM -->
Credit Card Number: <input type=text name="CardNo" placeHolder="Credit Card Number" value="" maxlength="16">
Expiration Month / Year: <font color="red">* </font>
<select name="ExpMonth">
<option value=""selected>mm</option>
<option >01</option>
<option >02</option>
<option >03</option>
</select>
<select name ="ExpYear">
<option value=""selected>yy</option>
<option >12</option>
<option >13</option>
<option >14</option>
</select>
Street Address Associated With Card: <input type=text name="Address" placeHolder="Address" value="">
</div>
<div id="div3" class="tab">
<!-- COUPON FORM -->
Coupon Code:
<input type="text" name="cpA" size=4 maxlength=4 > -
<input type="text" name="cpnB" size=6 maxlength=6> -
<input type="text" name="cpnC" size=5 maxlength=5>
<br />
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
function hideTabs(){
document.getElementById('div1').style.display = "none";
document.getElementById('div2').style.display = "none";
document.getElementById('div3').style.display = "none";
}
function showTab(tab){
document.getElementById(tab).className = 'tab';
}
hideTabs();
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
var radios = document.getElementsByName('tab');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
var here = i;
}
}
if (radios[here].value == "Inv") {
document.getElementById('div1').style.display = "block";
} else if(radios[here].value == "CC") {
document.getElementById('div2').style.display = "block";
} else if(radios[here].value == "Cpn") {
document.getElementById('div3').style.display = "block";
} else {
}
}
}
})();
</script>
<div id="formdiv">
<center><input type=submit name="submit" class="ButtonMain" value=" Authorize Payment "></center>
<br />
</div>
</form>
</div>
You fetch all inputs including the form inputs (card number et al.):
var nav = tabs.getElementsByTagName('input');
Then you assign an onclick to each the first act of which is to hide the tabs then reshow them, so whenever any input is clicked focus is lost immediately.
Chrome will not do anything noticeable & restores the elements focus, IE will reset it so the element effectively becomes uncapturable.
You need to only manage changing tabs when the radio button is clicked;
var radios = document.getElementsByName('tab');
for(var i=0;i<radios.length;i++){
radios[i].onclick = function(){
The issue looks like the line:
var nav = tabs.getElementsByTagName('input');
nav includes not just the radio buttons, but also the text input boxes as well, so when you attach the onclick function to all elements of the nav array it's causing the problem you see with the cursor jumping around. Quickest and easiest solution would be to limit it only to the radio buttons within the div id="nav" element:
var nav = document.getElementById('nav').getElementsByTagName('input');
Not required to fix the problem, but you can also simplify the javascript a little, since radios is not necessary anymore. Inside the onclick function, this will refer to the radio button clicked, so you can simplify:
nav[i].onclick = function(){
hideTabs();
var radios = document.getElementsByName('tab');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
var here = i;
}
}
if (radios[here].value == "Inv") {
document.getElementById('div1').style.display = "block";
} else if(radios[here].value == "CC") {
document.getElementById('div2').style.display = "block";
} else if(radios[here].value == "Cpn") {
document.getElementById('div3').style.display = "block";
} else {
}
}
to:
nav[i].onclick = function(){
hideTabs();
if (this.value == "Inv") {
document.getElementById('div1').style.display = "block";
} else if(this.value == "CC") {
document.getElementById('div2').style.display = "block";
} else if(this.value == "Cpn") {
document.getElementById('div3').style.display = "block";
}
};
Related
I am having trouble deleting an element which was duplicated by an onClick event.
Firstly, please don't rage at my IDs....the page is a mess right now.
I have a div element that appears after a radio button is selected.
The Radio Buttons I have created:
<div class="wrapper">
<input type="radio" onclick="yesnoCheck();" name="select" id="option-1">
<input type="radio" onclick="yesnoCheck();" name="select" id="option-2" checked>
<label for="option-1" class="option option-1"><span>Yes</span></label>
<label for="option-2" class="option option-2"><span>No</span></label>
</div>
In this div element is a form.
<div class="basicInfoContainer">
<div class="basicInfoItemTitle"><h3>Full Name</h3></div>
<div class="basicInfoItem"><input type="text" id="fNames" name="Full Names" placeholder="John Doe" size="50"></div>
<div class="basicInfoItemTitle"><h3>Site Name</h3></div>
<div class="basicInfoItem"><input type="text" id="sName" name="Site Name" placeholder="ABC" size="50"></div>
<div class="basicInfoItemTitle"><h3>Site Address</h3></div>
<div class="basicInfoItem"><input type="text" id="sAddress" name="Site Address" placeholder="123 Story Street" size="50"></div>
<div class="basicInfoItemTitle"><h3>Branch</h3></div>
<div class="basicInfoItem">
<select name="Branch" id="branch" aria-placeholder="Select a Branch">
<option value="" disabled selected>Select a Branch...</option>
<option value="Pretoria">Option1</option>
<option value="Midrand">Option2</option>
</select></div>
</div>
<button class="addItem" value="Add Item" id="addItem" onclick = "duplicate()" style="display: none;"><label for="addItem">Add Item</label></button>
This form shows once I press the Yes radio button:
function yesnoCheck() {
if (document.getElementById("option-1").checked) {
document.getElementById("ifYes").style.display = 'block';
document.getElementById("addItem").style.display = "block";
} else {
document.getElementById("ifYes").style.display = 'none';
document.getElementById("addItem").style.display = "none";
}
};
I then duplicate the form using:
var i = 0;
var original = document.getElementById('ifYes');
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "ifYes" + ++i;
original.parentNode.appendChild(clone);
}
My question is, when I press No On the Radio Buttons, I want all those duplicated div elements to be removed.
Right now, only the one ,coded in the HTML gets removed. Not the elements created by JS.
So I managed to fix it.
The altered code lies below:
function yesnoCheck() {
if (document.getElementById("option-1").checked) {
document.getElementById("ifYes").style.display = 'block';
document.getElementById("addItem").style.display = "block";
} else {
document.getElementById("ifYes").style.display = 'none';
document.getElementById("addItem").style.display = "none";
};
if(document.getElementById("option-2").checked){
var removeEquipment= document.getElementById("ifYes0");
removeEquipment.remove();
}
}
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "ifYes" + i;
original.parentNode.appendChild(clone);
}
By no means efficient, but I got around it by not adding var i up the whole time. Once I press "Add Item", each time it will clone the div element with ID ifYes0.
Then I made a var for ifYes0 and then it removes all additional ones.
I don't care about data retention in those forms that are deleted, but if I need to, in future I might just set those display to none, instead.
I can't figure out how the function showInputE() isn't being prepossessed.
I have some if statements within a function. If the if statements are true then they should preform a function. I want the functions to hide or show the the inputs in the easyAssignments div, depending on what the user inputs in numEAI. (Example: user inputs 3, only 3 input boxes will show) However when i click the enter button nothing appears to happen.
<div id ="numEA">
<p>How many easy assignments do you have to do today?</p>
<input min="0" max="5" type="number" id="numEAI">
<button class="w3-button w3-red" onclick="showInputE()">Enter</button>
</div>
<div id="easyAssignments">
<p>What easy assignments do you have to do today?</p>
<input type="text" id="easyA1">
<input type="text" id="easyA2">
<input type="text" id="easyA3">
<input type="text" id="easyA4">
<input type="text" id="easyA5">
</div>
<script>
/* START of show input functions */
function onlyShowInput1(){
document.getElementById("easyA2").style.display = "none";
document.getElementById("easyA3").style.display = "none";
document.getElementById("easyA4").style.display = "none";
document.getElementById("easyA5").style.display = "none";
}
function onlyShowInput2(){
document.getElementById("easyA3").style.display = "none";
document.getElementById("easyA4").style.display = "none";
document.getElementById("easyA5").style.display = "none";
}
/* END of show input functions */
function showInputE(){
var numEAI = document.getElementById('numEAI');
if (numEAI === 1){
onlyShowInput1();
} else if (numEAI === 2){
onlyShowInput2();
}
}
</script>
You are currently comparing a DOM element to a number in your if statement.
In order to test the value contained in the element you can retrieve it using numEAI.value. This returns a string so if you are going to use ===, which tests for equality of value and type, you need to compare it to a string if (numEAI.value === '1'), otherwise to just test equality of value use ==.
/* START of show input functions */
function onlyShowInput1(){
document.getElementById("easyA2").style.display = "none";
document.getElementById("easyA3").style.display = "none";
document.getElementById("easyA4").style.display = "none";
document.getElementById("easyA5").style.display = "none";
}
function onlyShowInput2(){
document.getElementById("easyA3").style.display = "none";
document.getElementById("easyA4").style.display = "none";
document.getElementById("easyA5").style.display = "none";
}
/* END of show input functions */
function showInputE(){
var numEAI = document.getElementById('numEAI');
if (numEAI.value === '1'){
onlyShowInput1();
} else if (numEAI.value == 2){
onlyShowInput2();
}
}
<div id ="numEA">
<p>How many easy assignments do you have to do today?</p>
<input min="0" max="5" type="number" id="numEAI">
<button class="w3-button w3-red" onclick="showInputE()">Enter</button>
</div>
<div id="easyAssignments">
<p>What easy assignments do you have to do today?</p>
<input type="text" id="easyA1">
<input type="text" id="easyA2">
<input type="text" id="easyA3">
<input type="text" id="easyA4">
<input type="text" id="easyA5">
</div>
Change your script to:
function showHide(n) {
let inputs = document.getElementById("easyAssignments").querySelectorAll("input");
let item = 0;
inputs.forEach(function(i) {
item++;
if (item <= n) {
i.style.display = "inline";
} else {
i.style.display = "none";
}
})
}
function showInputE(){
var numEAI = document.getElementById('numEAI').value;
showHide(numEAI);
}
As all of the input items are named with sequential ids, you can switch the display style depending on whether or not the id matches "easyA" + numEAI. There's no need to have a function for each input item.
I've built a small game using checkboxes with images. When the user comes across the item in the picture they select the checkbox and the message changes on screen. Because this is a tourist guide website and game, the user will leave the page to look at other pages, selecting the pictures as they come across the item. Therefore I needed to save the checked boxes in localstorage so that the data persists. I have some javascript that dsave the checked boxes.
Each picture has a value and when the image is clicked it adds to an overall total. I can't get this total to persist if the page is refreshed or closed and reopened.
My javascript for calculating the total and storing the checkboxes is below.
$('.dp-spotter-switch input[type="checkbox"]').click(function () {
if (!$(this).is(':checked')) {
$(this).parent('.dp-spotter-switch').removeClass('spotter-scale');
} else {
$(this).parent('.dp-spotter-switch').addClass('spotter-scale');
}
});
function showDiv() {
document.getElementById('getScoreLabel').style.display = "block";
}
// Total values
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "" + total.toFixed(0);
}
// Store checkbox state
(function () {
var boxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
if (box.hasAttribute("store")) {
setupBox(box);
}
}
function setupBox(box) {
var storageId = box.getAttribute("store");
var oldVal = localStorage.getItem(storageId);
console.log(oldVal);
box.checked = oldVal === "true" ? true : false;
box.addEventListener("change", function () {
localStorage.setItem(storageId, this.checked);
});
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="dp-spotter-container">
<div class="dp-top-paragraph">
<p>Some text</p>
<p>Click on the photos once you have spotted, and at the end click on <strong>Get Your Score</strong> to see how you've done</p>
<div id="getScoreLabel" style="display:none; text-align: center;">
<div class="dp-your-score-text" id="getScore">Your Score</div>
<input value="0" readonly="readonly" type="text" id="total" class="dp-scores dp-floating"/>
</div>
</div>
<br/>
<br/>
<!-- Spotter 1 -->
<div class="dp-switch-container">
<label class="dp-spotter-switch">
<img class="dp-spotter-img" src="image.jpg">
<input type="checkbox" name="product" value="3" id="cb1" class="spotter-check" onclick="totalIt()" store="checkbox1">
<span class="dp-spotter-slider"></span>
<span class="dp-spotter-text-label">Item 1- 3 Points</span>
</label>
</div>
<!-- Spotter 2 -->
<div class="dp-switch-container">
<label class="dp-spotter-switch">
<img class="dp-spotter-img" src="image.jpg">
<input type="checkbox" name="product" value="3" id="cb2" class="spotter-check" onclick="totalIt()" store="checkbox2">
<span class="dp-spotter-slider"></span>
<p class="dp-spotter-text-label">Item 2 - 3 Points</p>
</label>
</div>
<!-- Spotter 3 -->
<div class="dp-switch-container">
<label class="dp-spotter-switch">
<img class="dp-spotter-img" src="image.jpg">
<input type="checkbox" name="product" value="5" id="cb3" class="spotter-check" onclick="totalIt()" store="checkbox3">
<span class="dp-spotter-slider"></span>
<p class="dp-spotter-text-label">ITem 3 - 5 Points</p>
</label>
</div>
<!-- Spotter 4 -->
<div class="dp-switch-container">
<label class="dp-spotter-switch">
<img class="dp-spotter-img" src="image.jpg">
<input type="checkbox" name="product" value="10" id="cb4ß" class="spotter-check" onclick="totalIt()" store="checkbox4">
<span class="dp-spotter-slider"></span>
<p class="dp-spotter-text-label">Item 4 - 10 Points</p>
</label>
</div>
Get Your Score
</div>
I'm looking for a way to add to the existing function for the checkboxes if possible.
Unfortunately we can't use local storage in StackOverflow runnable code snippets, so you'll have to head over to my repl.it to see this working in action.
Since you're using jQuery, I've gone ahead and provided a jQuery solution:
Used .attr() to set the checkbox based on local storage
Called totalIt when showing showDiv
If you want to use your existing code, just change box.checked = oldVal === "true" ? true : false; to box.setAttribute('checked', oldVal === "true" ? true : false) and add totalIt to your showDiv function
Demo
https://repl.it/#AnonymousSB/SO53500148
Solution
function showDiv() {
totalIt();
document.getElementById('getScoreLabel').style.display = "block";
}
// Total values
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "" + total.toFixed(0);
}
// Store checkbox state
function setupBox(box) {
var storageId = box.attr("store");
var oldVal = localStorage.getItem(storageId);
box.attr('checked', oldVal === "true" ? true : false)
box.change(function() {
localStorage.setItem(storageId, this.checked);
});
}
$(document).ready(function () {
$( "input[type='checkbox'][store]" ).each(function( index ) {
setupBox($( this ));
});
})
You can open Chrome Dev Tools, go to Application, and see your local storage
I have three radio buttons that calculate fees. When you click the first radio button it has a drop down with a checkbox if you click the checkbox it adds $3.. if the user realizes that was a mistake and does not unclick the check box and clicks another radio button it does not remove the $3 from the total until the radio buttons are clicked at least twice.
The first two radio buttons are 78.25 and the 3rd is 88.25. Click first radio button 78.25 and then the checkbox will make it 81.25, then pretend your the user change your mind and hit the second radio button it should change it back to 78.25 when you click. But it does not and it keeps 81.25 if you click the third radio button it finally realizes it and corrects itself?
I have it set up to uncheck the checkbox when another radio button is checked but for some reason the fee is not changing instantly and is delayed for some reason. Can some one please assist?
If anyone has any suggestions or advice it would be greatly appreciated!
http://jsfiddle.net/Ln1fnstb/2/
$(function(){ //added by me
$('#brandnewrv').click(function(){
calculateTotal();
});
});
function rvsPrice()
{
var rvPrice=0;
var theForm = document.forms["form"];
var brandnewRv = document.getElementById('brandnewrv');
if(brandnewRv.checked==true)
{
rvPrice=3;
}
return rvPrice;
}
//Setting Proof of Ownership Prices
//Set up an associative array
var title_prices = new Array();
title_prices["MCO"]=78.25;
title_prices["FL Title"]=78.25;
title_prices["OOS Title"]=88.25;
// Proof of Ownership Radio Buttons
function getProofOfOwnership()
{
var proofOfOwnership=0;
//Get a reference to the form id="form"
var theForm = document.forms["form"];
//Get a reference to the title the user Chooses name=ownerShip":
var ownerShip = theForm.elements["ownership"];
//Here since there are 4 radio buttons ownerShip.length = 4
//We loop through each radio buttons
for(var i = 0; i < ownerShip.length; i++)
{
//if the radio button is checked
if(ownerShip[i].checked)
{
proofOfOwnership = title_prices[ownerShip[i].value];
//If we get a match then we break out of this loop
//No reason to continue if we get a match
break;
}
}
//We return the proofOfOwnership
return proofOfOwnership;
}
function calculateTotal()
{
var titleFees = rvsPrice() + getProofOfOwnership();
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Estimated Transfer Fees $"+titleFees;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form name="form">
<label><strong>Proof of Ownership</strong></label><br />
<label class='radiolabel'><input type="radio" name="ownership" required="yes" message="Please select proof of ownership." value="MCO" onclick="calculateTotal()" onchange="statedropDown(this.value);"/>Manufacturer's Statement of Origin </label>
<label class='radiolabel'><input type="radio" name="ownership" value="FL Title" onclick="calculateTotal()" onchange="statedropDown(this.value);"/>Florida Certificate of Title </label>
<label class='radiolabel'><input type="radio" name="ownership" value="OOS Title" onclick="calculateTotal()" onchange="statedropDown(this.value);"/>Out-of-state Certificate of Title </label>
<div id="div3" style="display:none">
<div class="clearfix">
<select name="month1" id="month1" size="1">
<option value="">Choose a Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
</div>
</div>
<div id="div4" style="display:none">
<!---You are not qualified to see this form.--->
</div>
<div id="div5" style="display:none">
<p><label for='brandnewrv' class="inlinelabel"> Check if Brand new RV/Motor Home</label>
<input type="checkbox" id="brandnewrv" name='brandnewrv' onclick="calculateTotal()" /></p>
</div>
<div id="totalPrice"></div>
<script type="text/javascript">
function statedropDown(ownership) {
if (ownership == "OOS Title") {
document.getElementById("div3").style.display = 'block';
document.getElementById("div4").style.display = 'none';
document.getElementById("div5").style.display = 'none';
document.getElementById("brandnewrv").checked = false;
rvsPrice();
}
else if (ownership == "FL Title") {
document.getElementById("div4").style.display = 'block';
document.getElementById("div3").style.display = 'none';
document.getElementById("div5").style.display = 'none';
document.getElementById("titlestates").selectedIndex = 0;
document.getElementById("brandnewrv").checked = false;
rvsPrice();
}
else if (ownership == "MCO") {
document.getElementById("div5").style.display = 'block';
document.getElementById("div3").style.display = 'none';
document.getElementById("div4").style.display = 'none';
document.getElementById("titlestates").selectedIndex = 0;
}
}
</script>
</form>
I think there's some more complexity than there needs to be. I think the radio buttons really just need a "click" handler that calls a modified version of the "statedropDown" function, and no "change" handler. The "statedropDown" function should be changed so that it calls "calculateTotal()" at the end. And that line that references "titlestates" needs to be commented out in the fiddle, since that part of the DOM isn't there.
<label class='radiolabel'>
<input type="radio" name="ownership" required="yes" message="Please select proof of ownership." value="MCO" onclick="statedropDown(this.value)">Manufacturer's Statement of Origin </label>
<label class='radiolabel'>
<input type="radio" name="ownership" value="FL Title" onclick="statedropDown(this.value)">Florida Certificate of Title </label>
<label class='radiolabel'>
<input type="radio" name="ownership" value="OOS Title" onclick="statedropDown(this.value)">Out-of-state Certificate of Title </label>
and then
function statedropDown(ownership) {
if (ownership == "OOS Title") {
document.getElementById("div3").style.display = 'block';
document.getElementById("div4").style.display = 'none';
document.getElementById("div5").style.display = 'none';
document.getElementById("brandnewrv").checked = false;
} else if (ownership == "FL Title") {
document.getElementById("div4").style.display = 'block';
document.getElementById("div3").style.display = 'none';
document.getElementById("div5").style.display = 'none';
//document.getElementById("titlestates").selectedIndex = 0;
document.getElementById("brandnewrv").checked = false;
} else if (ownership == "MCO") {
document.getElementById("div5").style.display = 'block';
document.getElementById("div3").style.display = 'none';
document.getElementById("div4").style.display = 'none';
//document.getElementById("titlestates").selectedIndex = 0;
}
calculateTotal();
}
Here is the updated fiddle. (I changed a couple of other minor things while tinkering with it, but I think the above changes are the key.)
I have a page where, depending on whether the value of a combobox is false (no), an input box should be hidden and a fieldset disabled. When the combobox's value changes to true (yes), the form should show the input box and enable the fieldset.
This is what I have so far:
<html>
<head>
<title>combo</title>
<script language="javascript">
function ToggleDisplay(Section, boolHide) {
if (boolHide == true) {
Section.style.display = "none";
}
else {
Section.style.display = "";
}
}
function disableElement(element, boolHide)
{
var input =
document.getElementById(element).getElementsByTagName("input");
for(var i = 0; i < input.length; i++)
{
input[i].setAttribute("disabled",boolHide);
}
}
function hideShowElement(CurrentSection, OtherSection, DisableSection)
{
var sectionVal = CurrentSection.value;
if (sectionVal == 0) {
ToggleDisplay(OtherSection, true);
//disableGroup (this.form, 'Radio1' , true);
disableElement(DisableSection, "true");
}
else {
ToggleDisplay(OtherSection, false);
//disableGroup (this.form, 'Radio1' , true);
disableElement(DisableSection, "false");
}
}
</script>
</head>
<body>
<form name="testForm" action="" method="post">
Show Hidden Text? <select name="cmbYN"
onchange="hideShowElement(this, MyDIV, 'OptionGrp1');">
<option value="0" selected="selected"></option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<div id="MyDIV" style="display: none">
My Hidden Text: <input name="Text1" type="text" />
<br>
</div>
<fieldset id="OptionGrp1" name="Group1">
Option Group<br><br>
Option 1<input name="Radio1" type="radio" checked>
Option 2<input name="Radio1" type="radio">
</fieldset>
</form>
</body>
</html>
This is hiding the input box and disabling the fieldset, but not re-enabling them.
You should change the display back to what it was before, normally block.
if (boolHide){
Section.style.display = "none";
}else {
Section.style.display = "block";
}
Also for the disabled, the proper way is setting the disabled attribute to disabled and removing it afterwards:
for(var i = 0; i < input.length; i++)
{
if(boolHide){
input[i].setAttribute("disabled", "disabled");
}else{
input[i].removeAttribute("disabled");
}
}