0

How do I hide a form and display it when a label is clicked?

<form id="form1" action="javascript:return true;" name="form1"> <input type="radio" name="group1" value="opt1" id="opt1" onclick="show()"><label for="opt1">Option 1</label><br> <input type="radio" name="group1" value="opt2" id="opt2" onclick="show()"><label for="opt2">Option 2</label><br> <input type="radio" name="group1" value="opt3" id="opt3" onclick="show()"><label for="opt3">Option 3</label><br> <div id="droplist"> <select name="opt2-select"> <option value='opt2a'>Option 2A</option> <option value='opt2b'>Option 2B</option> <option value='opt2c'>Option 2C</option> </select> </div> </form> <label id="a" onclick="formenable()">click</label>.... function formenable() { var o=document.getElementById("form1"); o.style.visibility="hidden" }

First the form should be hidden default. When the label is clicked the form should be displayed. How do I do that?

Improve this question

2 Answers 2

Reset to default
1 
<form id="form1" action="javascript:return true;" name="form1" style="display:none"> 
<script> function cl(obj) { div = document.getElementById(obj.id + 'div'); div.style.display = (div.style.display == 'block') ? 'none' : 'block'; } </script> <label id="browser" onclick="cl(this)">Browser</label> <div id="browserdiv" style="display: none"> Browser stuff goes here <label id="os" onclick="cl(this)">OS</label> <div id="osdiv" style="display: none"> OS stuff goes here </div> </div>

With this, when you click on the Browser label, all of the 'os' still will appear/disappear, without having to do any extra hiding/showing. Probably not exactly what you want, but should get you started.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

@thuk: o.style.visibility = 'visible' instead of hidden.
@thuk You have hidden the form, and labels are in this form. Conclusion: hiding container hides also the contained elements. You have to move labels somewhere else or reorganize your HTML elements.
@Marc The problem is the OP wants to hide the form with labels in it and then to show it after labels are clicked (pretty hard considering labels are also hidden with the form).
Yes, you can add a form inside a div.
@Dave. a problem jsfiddle.net/saravanabalaji/XHV7X/3 . look at this. when we click "gaming" then "os" a textbox will appear. when we again click os the textbox will disappear. but the problem is when we again click the browser the os and textbox must disappear but os alone disappear.. suggestion ...........
|
0

First you have to set CSS style display of that form to none. Then you can use eg. jQuery's .show() function.

CSS styles look like this:

form#form1 { display: none; }
Improve this answer

2 Comments

@Tadeck a problem jsfiddle.net/saravanabalaji/XHV7X/3 . look at this. when we click "gaming" then "os" a textbox will appear. when we again click os the textbox will disappear. but the problem is when we again click the browser the os and textbox must disappear but os alone disappear.. suggestion ...........
@thuk You did not remove the textbox. My suggestion is, that if you have some constant items that need to be appearing and disappearing, just turn the visibility on and off and keep some kind of hierarchy - it will be easier for you to switch the whole container than every single piece of it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.