How to display a hidden area when a radio button is checked?

When a user completes a form, we'd like to display a hidden area if they make a particular selection from a radio button list. This would be hidden unless they made the appropriate selection.

Is this a feature in any of the WebAssist extensions?
Thank you.
NJ

It is not part of any webassist extensions, but can be done with a simple javascript:

<input type="button" onclick="if (document.getElementById('radiobuttonid').checked) document.getElementById('hiddenDiv').style.display = 'block';"

You make it sound so simple! I tried this...

<form>
<input type="radio" name="TMSAmembershipratesID" id="TMSAmembershipratesID1" value="Panda Skin Member"> Panda Skin

<input type="radio" name="TMSAmembershipratesID" id="TMSAmembershipratesID2" value="Platinum Member" onclick="if (document.getElementById('TMSAmembershipratesID2').checked) document.getElementById('reveal-if-active').style.display = 'block';"> Platinum (this is the trigger)

<input type="radio" name="TMSAmembershipratesID" id="TMSAmembershipratesID3" value="Gold Member"> Gold

<div id="reveal-if-active">
<input name="otherfield" id="otherfield" type="text" class="form-control">
</div>
</form>

And I have the following in my CSS:
#reveal-if-active {
display: none;
}

...but the hidden field doesn't display and checking the trigger radio button doesn't reveal it?
Awaits you pointing out the obvious. Thank you Ray.

NJ.

EDIT: It's working now, but when I select any of the other radio buttons, the revealed form field remains. So I tried to be smart and change my buttons to this:

<input type="radio" name="TMSAmembershipratesID" id="TMSAmembershipratesID1" value="Panda Skin Member" onclick="if (document.getElementById('TMSAmembershipratesID1').checked) document.getElementById('reveal-if-active').style.display = 'none';"> Panda Skin


<input type="radio" name="TMSAmembershipratesID" id="TMSAmembershipratesID2" value="Platinum Member" onclick="if (document.getElementById('TMSAmembershipratesID2').checked) document.getElementById('reveal-if-active').style.display = 'block';"> Platinum (this is the trigger)

<input type="radio" name="TMSAmembershipratesID" id="TMSAmembershipratesID3" value="Gold Member" onclick="if (document.getElementById('TMSAmembershipratesID3').checked) document.getElementById('reveal-if-active').style.display = 'none';"> Gold

Will the hidden form field still be submitted, albeit with a blank value, if it's not 'revealed'?

Yes, it will always be submitted even if it isn't displayed.

You might want to add a function to the page and just call the function with each onclick like:

<script>
function hideorshow() {
if (document.getElementById('TMSAmembershipratesID2').checked) {
document.getElementById('reveal-if-active').style.display = 'block';
} else {
document.getElementById('reveal-if-active').style.display = 'none';
}
}
</script>

Then each radio can have the same onclick="hideorshow()"

Thank you for this Ray.

I'm having problems where the first radio button is checked. Because it is not physically "onclick"ed it doesn't work but I need at least one of the radio buttons selected don't I? Is it better to have none of them selected, when using a function such as this, and just use validation to ensure that it's selected?

Thank you.
NJ

Just set one to selected by default. There is no way to deselect all, so validation won't be necessary.

But the function relies on "onclick" does it not? Therefore, if an item is selected as "checked" by default it won't run the onclick function will it.

Also, how do I change that function example you've provided to cope with more than two scenarios? I thought elseif might do it, but I think I'm trying to apply Classic ASP thinking to this type of thing and it, clearly, doesn't work...this is what I'm trying (that isn't working):

The function:

<script>
function hideorshow() {
 if (document.getElementById('TMSAmembershipratesID1').checked) {
 document.getElementById('reveal-if-notfamily').style.display = 'block';
 } else if (document.getElementById('TMSAmembershipratesID2').checked) {
 document.getElementById('reveal-if-notfamily').style.display = 'block';
 } else if (document.getElementById('TMSAmembershipratesID3').checked) {
 document.getElementById('reveal-if-notfamily').style.display = 'block';
 } else if (document.getElementById('TMSAmembershipratesID4').checked) {
 document.getElementById('reveal-if-family').style.display = 'block';
 } else if (document.getElementById('TMSAmembershipratesID5').checked) {
 document.getElementById('reveal-if-notfamily').style.display = 'block';
 }
}
</script>

The CSS...

#reveal-if-family {
	display: none;	
}
#reveal-if-notfamily {
	display: none;	
}

The form...

<form>
<label class="col-sm-4 control-label" for="TMSAmembershipratesID">Type of Membership:</label>
                            <div class="col-sm-8">
                    	                    	    <div class="radio">
                    	      <label class="control-label" for="TMSAmembershipratesID">
<input type="radio" name="TMSAmembershipratesID" id="TMSAmembershipratesID1" value="Individual Standard" checked onclick="hideorshow();">
                    	        Individual Standard (&pound;20.00 per year)
                    	        </label>
                    	      </div>
                    	                      	    <div class="radio">
                    	      <label class="control-label" for="TMSAmembershipratesID">
<input type="radio" name="TMSAmembershipratesID" id="TMSAmembershipratesID3" value="Individual Premium"  onclick="hideorshow();">
                    	        Individual Premium (&pound;50.00 per year)
                    	        </label>
                    	      </div>
                    	                      	    <div class="radio">
                    	      <label class="control-label" for="TMSAmembershipratesID">
<input type="radio" name="TMSAmembershipratesID" id="TMSAmembershipratesID2" value="Individual Concession"  onclick="hideorshow();">
                    	        Individual Concession (&pound;15.00 per year)
                    	        </label>
                    	      </div>
                    	                      	    <div class="radio">
                    	      <label class="control-label" for="TMSAmembershipratesID">
<input type="radio" name="TMSAmembershipratesID" id="TMSAmembershipratesID4" value="Family"  onclick="hideorshow();">
                    	        Family (&pound;30.00 per year)
                    	        </label>
                    	      </div>
                    	                      	    <div class="radio">
                    	      <label class="control-label" for="TMSAmembershipratesID">
<input type="radio" name="TMSAmembershipratesID" id="TMSAmembershipratesID5" value="Affiliate"  onclick="hideorshow();">
                    	        Affiliate (&pound;30.00 per year)
                    	        </label>
                    	      </div>
</div>
</form>

The Hide/Reveal stuff..

<div id="reveal-if-family">
<p>Form fields in here.</p>
</div>

<div id="reveal-if-notfamily">
                                <input name="form2NDADULT" id="form2NDADULT" type="hidden">
                                <input name="form1STCHILD" id="form1STCHILD" type="hidden">
                                <input name="form1STCHILDDOB" id="form1STCHILDDOB" type="hidden">
                                <input name="form2NDCHILD" id="form2NDCHILD" type="hidden">
                                <input name="form2NDCHILDDOB" id="form2NDCHILDDOB" type="hidden">
                                <input name="form3RDCHILD" id="form3RDCHILD" type="hidden">
                                <input name="form3RDCHILDDOB" id="form3RDCHILDDOB" type="hidden">
</div><!-- end reveal-if-notfamily -->

Thank you.
NJ

You can call the same function using the body onload event so that it will run once before anything is clicked.

In your script you would have to set the display to none for all of the other displays when you update the one you want to show to display.

Yes, but if one of the radio buttons is set as "checked" then it will already be selected and NOTHING could potentially be clicked, right?
Isn't that going to cause problems?

Thinking out loud here too...you said that if I have hidden the additional form fields using "display:none" then they'll still be submitted so, technically, I don't need to create the "reveal-if-notfamily" set of hidden form elements because they already exist?

Really appreciate it Ray, thank you.
NJ

Urggh...I have removed onclick="hideorshow();" from the input radio button and moved it into <body onload="hideorshow();"> and now it doesn't work at all. :( Do I still need an onclick somewhere?

This is all happening at:
http://www.nathonjoneswebdesign.co.uk/tmsa/join-TMSA.php

EDIT: So, I added back in the onclick="hideorshow();" for each input radio option and it's working now. Just off to test if the hidden form fields are indeed being submitted. Thank you.