close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

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

Thread began 7/27/2015 10:13 am by Nathon Jones Web Design | Last modified 7/27/2015 6:20 pm by Ray Borduin | 978 views | 8 replies |

Nathon Jones Web Design

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

Sign in to reply to this post

Ray BorduinWebAssist

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';"

Sign in to reply to this post

Nathon Jones Web Design

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'?

Sign in to reply to this post

Ray BorduinWebAssist

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()"

Sign in to reply to this post

Nathon Jones Web Design

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

Sign in to reply to this post

Ray BorduinWebAssist

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

Sign in to reply to this post

Nathon Jones Web Design

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

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

Nathon Jones Web Design

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.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...