See me, field me

April 19, 2008 7:37 AM

WebDesignFilter: How can I show certain elements of a form depending on the value of a radio button?

I'm creating a form for a small-time personal project, and I absolutely love Fling Media's contact form. It uses the Yahoo UI toolkit to great effect to get a dynamically updated form depending on the type of contact you want. Are there any simpler implementations of this effect? I just want to show a certain set of fields when one option is selected and a different set when another is selected. I'd like to do it dynamically too, without having to load a new page. No fancy effects required.

posted by trim17 to computers & internet (3 answers total)

Yeah, put the parts of the forms that are conditional in divs with their css display property set to none. Using the onclick action of the radio button, use the DOM to set the display property to block... and when another one is clicked, set all of them to display:none, and set the one you want to display:block.

MUCH easier if you use something to enable DOM manipulation, like Prototype.
posted by SpecialK at 8:11 AM on April 19, 2008

Even easier with Prototype and script.aculo.us. When it's back up, check out this page: http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo
posted by cdmwebs at 9:08 AM on April 19, 2008

I just did this using javascript. It's nowhere near as nice as the example you linked to, nor as flexible as the other options mentioned (and won't work if your visitors generally have javascript turned off) but it works pretty well for my purposes.

You can't post code well here (I tried), so I put the code up in a .txt file, if you want to look at it.
posted by gemmy at 9:27 AM on April 19, 2008