Hi I’m trying to make a from which has a select box and if the value is “Other” then a text box will appear (not a popup, but actually a form on the page) asking “Explain:”. Is this possible?
@the_treeMay 18.2006 — #What specifically do you not understand?
The script is twofold, it first writes the class of the relevant element (in this case a label but it could just as easily be a div or a p) and then it gives it an onclick function to the relevant select element that will change the class back, so that the css will show it again.
@slaughtersMay 22.2006 — #All you really need is to use a simple Hide/Show function to hide the text area "Explain" box when something besides "Other" is chosen. Using this approach on the above example gives you this:<html> <head> <script type="text/javascript"> function ShowIt(idName) { document.getElementById(idName).style.display = 'block'; } function HideIt(idName) { document.getElementById(idName).style.display = 'none'; } </script> </head> <body> <form action="whatever.pl"> Select Something <select> <option onClick="HideIt('describe');">One</option> <option onClick="HideIt('describe');">Two</option> <option onClick="ShowIt('describe');">Other</option> </select> <br> <label id="describe" style="display:none">Explain:<br><textarea id="Explain"></textarea></label> <button type="submit">Submit</button> </form> </body> </html>
It uses the W3C DOM - but not all implimentations of JavaScript support that Document Object Model. So first it looks for one of the tell-tale methods, document.getElementById, something that is a sure sign that the DOM is supported.
If found then a function is created and assigned to the onload handler. This function will alter the document but it can't do that untill the document exists which is why we call it onload.
The first thing it does is change the className of the element "describe". We do this with JavaScript because not all people use JavaScript. This might seem backwards but we don't want to hide an element unless we are certain that we can un-hide it. People without JavaScript, and people with older implimentations, will always see the toggled section. It's not exactly what we want but at least the page will stay usable.
Then it creates another function and assigns it to the onclick handler of the checkbox. And this function toggles the className of the toggeld element.
@the_treeMay 31.2006 — #I still don't get this part: document.getElementById ('describe').className = this.checked ? '' : 'hide'[/QUOTE] [b]document[/b] look in this document, [b]getElementById('describe')[/b] find an element with the id of 'describe'. [b]className[/b] it's class... [b]=[/b] should be equal to, [b]this.checked ?[/b] depending on the checked value of the element in question, [b]'':'hide'[/b] '' if true and 'hide' if false.