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?
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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I believe this is what you're looking for:
<form>
<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
</form>
<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>
ASKER
TheVanter:
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.
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.
ASKER