[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Dynamic form, radio button to show/hide other element

Posted on 2009-05-02
9
Medium Priority
?
643 Views
Last Modified: 2013-11-19
This kind of question has been asked many time already and I have found multiple example on the net but not quite what I'm looking for.

They all work the same, you click on a radio button and another form element shows up asking for more details the amount and kind of details asked depends on the button you selected. You click another button the first set of details is hidden and a new set show up.

I need the same thing but with multiple group of radio button each group being independant of the previous or next group.

So to recap I need a group of radio button with show/hide capabilities and then another group of radio button with the same capabilities but totally independant of the first group.

I may need more than 2 group as well.

Some of the group are populated from a mysql query.
0
Comment
Question by:gamebits
  • 5
  • 4
9 Comments
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24286085
Do you have any base code?
I can come up with an example but from what it sounds like you need something more specific. Hence a need for some base code.
0
 
LVL 28

Author Comment

by:gamebits
ID: 24286168
Unfortunately not on this computer, but a pseudo code would look like this

()sport
()non-sport
()ccg

when the user select one of the option than i would like to show more options, for example you select sport than a div would show up with the option ()baseball
                                                  ()Football
                                                  ()Basketball

Up to here I found quite a few tutorial how to do that, where I hit a wall is when I try to do the same thing again with another group of radio button for example

()Series
()Single Card

                               Again by making a selection a div would show up with more options

The problem is if I try to use the same function for both group by selecting an option in the second group it close the div in the first group
0
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24286691
I am coming across some interesting issues with coding this... would you be opposed to checkboxes instead of radio buttons... I think the overall coding would be simpler with the checkboxes...  We can still get radio buttons to work if that is what you really want.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 28

Author Comment

by:gamebits
ID: 24287001
I don't how you can implement the functionality using checkboxes, unless you hide the other options when you check a box

quick example would be with Sport, Non-Sport or CCG I want the user to select one of the three not any combination of the three.

if this can help the purpose of this script is to build a query using filters.
0
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24287039
here is what I have come up with so far... You should be able to apply it to what your doing. Although, I'm not sure if this is exactly what you wanted.
<html>
<head>
<style type="text/css">
.hidden {
	display : none;
}
</style>
 
<script language="javascript">
function check(obj)
{	
	var selected = document.getElementById(obj);
	var toggle = document.getElementById(obj + '0');
	var peakaboo = document.getElementById(obj + '1');
	toggle.value = toggle.value != 'true' ? 'true' : 'false';
	selected.checked = toggle.value == 'true' ? true : false;
	peakaboo.style.display = peakaboo.style.display == 'block' ? 'none' : 'block';
}
 
</script>
</head>
<body>
<form name="myform">
<input type="radio" onclick="check(this.id)" id="sports">Sports</input>
<input type="hidden" id="sports0">
<div class="hidden" id="sports1">
	<input type="radio" onclick="check(this.id)" id="ateams">Baseball</input>
	<input type="hidden" id="ateams0">
	<input type="radio" onclick="check(this.id)" id="bteams">Football</input>
	<input type="hidden" id="bteams0">
	<input type="radio" onclick="check(this.id)" id="cteams">Basketball</input>
	<input type="hidden" id="cteams0">
</div>
<div class="hidden" id="ateams1">
	<input type="radio">Boston Red Sox</input>
	<input type="radio">New York Yankees</input>
	<input type="radio">St. Louis Cardinals</input>
	<input type="radio">Oakland Athletics</input>
	<input type="radio">Los Angeles Dodgers</input>
</div>
<div class="hidden" id="bteams1">
	<input type="radio">Baltimore Ravens</input>
	<input type="radio">Cincinnati Bengals</input>
	<input type="radio">Cleveland Browns</input>
	<input type="radio">Pittsburgh Steelers</input>
	<input type="radio">Chicago Bears</input>
</div>
<div class="hidden" id="cteams1">
	<input type="radio">Boston Celtics</input>
	<input type="radio">New Jersey Nets</input>
	<input type="radio">Chicago Bulls</input>
	<input type="radio">Cleveland Cavaliers</input>
	<input type="radio">Atlanta Hawks</input>
</div>
</div>
<hr>
<input type="radio" onclick="check(this.id)" id="series">Series</input>
<input type="hidden" id="series0">
<div class="hidden" id="series1">
I hope this fits what you were looking for.
</div>
</form>
</body>
</html>

Open in new window

0
 
LVL 28

Author Comment

by:gamebits
ID: 24287888
It is very close to what I want although I didn't need the 3 level down (the teams part) this may become handy my only problem is the script doesn't hide the previously selected div if you change your mind and click on another radio button.

Basically the radio button do not act as radio button they work like toggle switch which is good would just be a little better if they would also toggle the other one (in the same group) at the same time.

I modified your script a little to adapt it to my needs (just added a few option).

Let me know if it can be modified.

Thanks for your help.
<html>
<head>
<style type="text/css">
.hidden {
	display : none;
}
</style>
 
<script language="javascript">
function check(obj)
{	
	var selected = document.getElementById(obj);
	var toggle = document.getElementById(obj + '0');
	var peakaboo = document.getElementById(obj + '1');
	toggle.value = toggle.value != 'true' ? 'true' : 'false';
	selected.checked = toggle.value == 'true' ? true : false;
	peakaboo.style.display = peakaboo.style.display == 'block' ? 'none' : 'block';
}
 
</script>
</head>
<body>
<form name="myform">
<input type="radio" onclick="check(this.id)" id="sports">Sports</input>
<br><INPUT TYPE="radio" onclick="check(this.id)" id="nonsport">Non-Sports</input>
<br><INPUT TYPE="radio" onclick="check(this.id)" id="ccgtcg">CCG-TCG</input>
<input type="hidden" id="sports0">
<div class="hidden" id="sports1">
	<input type="radio" onclick="check(this.id)" id="ateams">Baseball</input>
	<input type="hidden" id="ateams0">
	<input type="radio" onclick="check(this.id)" id="bteams">Football</input>
	<input type="hidden" id="bteams0">
	<input type="radio" onclick="check(this.id)" id="cteams">Basketball</input>
	<input type="hidden" id="cteams0">
</div>
<div class="hidden" id="ateams1">
	<input type="radio">Boston Red Sox</input>
	<input type="radio">New York Yankees</input>
	<input type="radio">St. Louis Cardinals</input>
	<input type="radio">Oakland Athletics</input>
	<input type="radio">Los Angeles Dodgers</input>
</div>
<div class="hidden" id="bteams1">
	<input type="radio">Baltimore Ravens</input>
	<input type="radio">Cincinnati Bengals</input>
	<input type="radio">Cleveland Browns</input>
	<input type="radio">Pittsburgh Steelers</input>
	<input type="radio">Chicago Bears</input>
</div>
<div class="hidden" id="cteams1">
	<input type="radio">Boston Celtics</input>
	<input type="radio">New Jersey Nets</input>
	<input type="radio">Chicago Bulls</input>
	<input type="radio">Cleveland Cavaliers</input>
	<input type="radio">Atlanta Hawks</input>
</div>
<input type="hidden" id="nonsport0">
<div class="hidden" id="nonsport1">
     NON SPORTS OPTIONS HERE
</div>
<input type="hidden" id="ccgtcg0">
<div class="hidden" id="ccgtcg1">
    CCG TCG OPTIONS HERE
</div>
</div>
<hr>
<input type="radio" onclick="check(this.id)" id="series">Series</input>
<br><input type="radio" onclick="check(this.id)" id="singlecard">Single Card</input>
<input type="hidden" id="series0">
<div class="hidden" id="series1">
I hope this fits what you were looking for.
</div>
<input type="hidden" id="singlecard0">
<div class="hidden" id="singlecard1">
   SINGLE CARD OPTION HERE
   </div>
</form>
</body>
</html>

Open in new window

0
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24288374
The code can be altered to account for this.
0
 
LVL 6

Accepted Solution

by:
mudbuggle earned 2000 total points
ID: 24288472
Is this more along the lines of what your looking for? I completely re-vamped the code to make it as simple as possible. I didn't bother messing with the css for formatting since I'm not really sure how you want it. Let me know if you need anything else.
<html>
<head>
<style type="text/css">
div {
        display : none;
}
</style>
 
<script language="javascript">
function check(obj,level)
{     
		var hide = document.getElementsByTagName('div');
		if(level == 1)
		{
			for(i=0;i<6;i++)
			{
				hide[i].style.display = 'none';
			}
		}
		else if(level == 1.2)
		{
			for(i=1;i<4;i++)
			{
				hide[i].style.display = 'none';
			}
		}
		else if(level == 2)
		{
			for(i=7;i<9;i++)
			{
				hide[i].style.display = 'none';
			}
		}
        var peakaboo = document.getElementById(obj + '1');
        peakaboo.style.display = peakaboo.style.display == 'block' ? 'none' : 'block';
}
</script>
</head>
<body>
<form name="myform">
<input type="radio" onclick="check(this.id,'1')" id="sports" name="group1">Sports</input>
<br><INPUT TYPE="radio" onclick="check(this.id,'1')" id="nonsport" name="group1">Non-Sports</input>
<br><INPUT TYPE="radio" onclick="check(this.id,'1')" id="ccgtcg" name="group1">CCG-TCG</input>
 
<div class="hidden" id="sports1">
        <input type="radio" onclick="check(this.id,'1.2')" id="ateams" name="sport">Baseball</input>
        <input type="radio" onclick="check(this.id,'1.2')" id="bteams" name="sport">Football</input>
        <input type="radio" onclick="check(this.id,'1.2')" id="cteams" name="sport">Basketball</input>
</div>
 
<div id="ateams1">
		<input type="radio" name="teams">Boston Red Sox</input>
        <input type="radio" name="teams">New York Yankees</input>
        <input type="radio" name="teams">St. Louis Cardinals</input>
        <input type="radio" name="teams">Oakland Athletics</input>
        <input type="radio" name="teams">Los Angeles Dodgers</input>
</div>
<div id="bteams1">
        <input type="radio" name="teams">Baltimore Ravens</input>
        <input type="radio" name="teams">Cincinnati Bengals</input>
        <input type="radio" name="teams">Cleveland Browns</input>
        <input type="radio" name="teams">Pittsburgh Steelers</input>
        <input type="radio" name="teams">Chicago Bears</input>
</div>
<div id="cteams1">
        <input type="radio" name="teams">Boston Celtics</input>
        <input type="radio" name="teams">New Jersey Nets</input>
        <input type="radio" name="teams">Chicago Bulls</input>
        <input type="radio" name="teams">Cleveland Cavaliers</input>
        <input type="radio" name="teams">Atlanta Hawks</input>
</div>
 
<div id="nonsport1">
     NON SPORTS OPTIONS HERE
</div>
<div id="ccgtcg1">
    CCG TCG OPTIONS HERE
</div>
</div>
<hr>
<input type="radio" onclick="check(this.id,'2')" id="series" name="group2">Series</input>
<br><input type="radio" onclick="check(this.id,'2')" id="singlecard" name="group2">Single Card</input>
 
<div id="series1">
I hope this fits what you were looking for.
</div>
 
<div id="singlecard1">
   SINGLE CARD OPTION HERE
</div>
</form>
</body>
</html>

Open in new window

0
 
LVL 28

Author Closing Comment

by:gamebits
ID: 31577172
mudbuggle went above and beyond what is expected from an Expert to provide a clean perfect code, awesome!!!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question