-1

Possible Duplicate:
javascript hide/show element

How TO hide the radio buttons, the radio buttons should be shown only when the user clicks on the show button plz can you give the sample program or suggest the site for this and in advance thank you

Community
  • 1
  • 1
geetha
  • 1
  • 1
  • 3
  • 1
    We can't with so little information and no code at all. Could you post something on http://jsfiddle.net/ please? – pimvdb Aug 25 '11 at 08:06
  • Learn the basics about [JavaScript](https://developer.mozilla.org/en/JavaScript/Guide) and [DOM](https://developer.mozilla.org/en/Gecko_DOM_Reference/Introduction). – Felix Kling Aug 25 '11 at 08:18
  • Covers the function and answers as [javascript hide/show element](http://stackoverflow.com/questions/6242976/javascript-hide-show-element) – ssube Aug 25 '11 at 09:14

2 Answers2

2

html:

<div id="radioButtonContainer">
    <input type="radio" name="selector" value="option1" id="selector1" /><label for="selector1">Option 1</label><br />
    <input type="radio" name="selector" value="option2" id="selector2" /><label for="selector2">Option 2</label><br />
    <input type="radio" name="selector" value="option3" id="selector3" /><label for="selector3">Option 3</label><br />
</div>

Javascript:

var radioButtonContainer = document.getElementById('radioButtonContainer');
radioButtonContainer.style.display = 'none';

document.getElementById('theButton').onclick = function() {
    radioButtonContainer.style.display = 'block';
};

Explanation: I wrap the buttons inside a container for ease of use. I then select the container in javascript, and store it in a variable for efficiency and shorter code. I set the display to none (hide it), and then attach an event handler to the click event of a the element with id "theButton" (not in html) to show it again.

Note: I hide them with Javascript, because otherwise the form could be unusable for people who don't use javascript (they do exist!), or when there would be a javascript error.

Daan Wilmer
  • 937
  • 4
  • 13
0

Put the radio buttons in a div with style display:none and on submit buttons Onclick event using javascript call a function and in that funcation set display as block for the div.

Astha
  • 1,728
  • 5
  • 17
  • 36