[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 262
  • Last Modified:

Triggering a Show/Hide section on form Radio button Selection

I know how to show and hide a DIV section via CSS, but my knowledge is limited to showing it only when a user is clicking an image to trigger the div to show.
I need to trigger the showing of a form section when a user selects a particular radio button.

The Form is a registration form, the user can choose either to sign up a family member or a business member.  If they choose a business member then they need to ener hotel and credit card information.  Family members do not need to enter this, so I do not wish to show it.

To keep the form simple (and becuse the ration is 10 familty to 1 business) I want to show the business section ONLY when someone clicks a radio button in the same form indicating it is a business member.

The RadioButton is called BusinessMember.

Obviously the section is always on the page and just shows up when the radio button is clicked, I would imagine that is CSS and DIV and perhaps some javascript?

  • 2
1 Solution
Ionut A. TudorPHP ProgrammerCommented:
to trigger it you need onclick event
<INPUT type="radio" name="test" value="value" onclick="javascript:showdiv();">Show div
See here: http://www.w3schools.com/tags/html5_ref_eventattributes.asp all the events you can use.
EGormlyAuthor Commented:
excellent Thank you!!
I believe this is what you're looking for:
<INPUT type="radio" name="BusinessMember" value="yes" onclick="document.getElementById('first').style.display = 'block';">Business
<INPUT type="radio" name="BusinessMember" value="no" onclick="document.getElementById('first').style.display = 'none';">Personal
<div id="first" style="display:none">This will show only when you click the first radio button</div>
<div id="second">This will always display</div>

Open in new window

EGormlyAuthor Commented:

Thank you, I had already closed this question and figured out how to tweak the code like you have shown to allow show hide with multiple selections.

Thanks for the efforts.. I appreciate it.


Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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