Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 382
  • Last Modified:

Simple JavaScript Hide/Show DIV Question

I have 3 radio buttons.. When a radio button is selected, I want to show the correct DIV. If the choice "None" is selected, I want to hide the divs....


Basically it is not really working.



<script language="Javascript1.2">
	function showOptions(){

		var radioLength = document.populateTable.rdo_choice.length;
		var checkedOption = '';

		for(var i = 0; i < radioLength; i++) {
			if(document.populateTable.rdo_choice[i].checked) {
				checkedOption = document.populateTable.rdo_choice[i].value;
			}
		}

		if (checkedOption == "sales")
			document.getElementById('sales_div').style.display='block';
		else if (checkedOption == "clients")
			document.getElementById('clients_div').style.display='block';
		else
			document.getElementById('sales_div').style.display='none';
			document.getElementById('clients_div').style.display='none';
	}
</script>




<input type="radio" name="rdo_choice" value="None" style="border: none;" onClick="return showOptions()"> None &nbsp;&nbsp;|&nbsp;&nbsp;
<input type="radio" name="rdo_choice" value="clients" style="border: none;" onClick="return showOptions()"> Report Details By Client &nbsp;&nbsp;|&nbsp;&nbsp;
<input type="radio" name="rdo_choice" value="sales" style="border: none;" onClick="return showOptions()"> Report Details Salesperson &nbsp;&nbsp;|&nbsp;&nbsp;


<div id="clients_div" style="display:none">

Data Here...

</div>

<div id="sales_div" style="display:none">

Data here...

</div>

Open in new window

0
theideabulb
Asked:
theideabulb
  • 2
1 Solution
 
ploftinCommented:
How about like this:

function showOptions(){
		
		if (document.populateTable.rdo_choice[0].checked) {
			document.getElementById('sales_div').style.display='block';
		}
		else if (document.populateTable.rdo_choice[1].checked) {
			document.getElementById('clients_div').style.display='block';
		}
		else {
			document.getElementById('sales_div').style.display='none';
			document.getElementById('clients_div').style.display='none';
		}
	}

Open in new window

0
 
theideabulbAuthor Commented:
Ok, i had to change it to this, but it worked...

function showOptions(){

            if (document.populateTable.rdo_choice[2].checked) {
                  document.getElementById('sales_div').style.display='block';
                  document.getElementById('clients_div').style.display='none';
            }
            else if (document.populateTable.rdo_choice[1].checked) {
                  document.getElementById('clients_div').style.display='block';
                  document.getElementById('sales_div').style.display='none';
            }
            else {
                  document.getElementById('sales_div').style.display='none';
                  document.getElementById('clients_div').style.display='none';
            }
      }
0
 
ploftinCommented:
Great.  Sorry, I don't have my usual debugging system, so I was using Notepad. :)  Glad it's working!
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now