Hello all,
I'm wondering if anyone has any experience with forms that automatically
show/hide certain elements based on a user's response.
For instance, I have the following silly form where the elements with class
"hidden" are hidden, and I'd like to show them if the user selects "Other,
please specify" from the drop-down menu, or "yes" on the radio box :
<form id="myForm" .... >
<fieldset>
<ol>
<li>
<label for="one">Some question here</label>
<select name="one" id="one">
<option selected="selected">Please select...</option>
<option value="networking">Networking event</option>
<option value="newspaper">Newspaper write-up</option>
<option value="word_of_mouth">Word of mouth</option>
<option value="other">Other, please specify</option>
</select>
<fieldset class="hidden">
// <--- this is hidden
<label>Please Specify</label>
<input name="one_a" id="one_a" type="text" value="" />
</fieldset>
</li>
<li>
<fieldset>
<legend>Are you happy?</legend>
<label><input type="radio" name="happy" /> Yes</label>
<label><input type="radio" name="happy" /> No</label>
</fieldset>
<fieldset class="hidden">
// <--- and so is this
<legend>Do you really mean yes?</legend>
<label><input type="radio" name="secretly_happy" /> Yes</label>
<label><input type="radio" name="secretly_happy" /> No</label>
</fieldset>
</li>
......
<input type="submit" name="button" />
</form>
The way I was going about it was to put the hidden elements and radio button
toggle into variables like so:
var togglers =
$(document.body).getElements('input[type=radio][name=secretly_happy]');
var hidden = $$('.hidden');
...and then to attach an onClick event to the radiobutton
togglers.each (function(e,i) {
e.addEvents('click': function(){
if (e.getProperty('checked')==true) {
hidden[i].setStyle('display','visible')
} else {
hidden[i].setStyle('display','none')
}
});
})
Now, the problem is that I've only put one element into "togglers" (ie. the
radiobox), so I'm only listening for that particular radiobutton to change.
This works when there is only one element's visibility to toggle. However, I
want to "do something" when a particular radiobutton is selected, AND when a
particular option is selected (AND possibly when any other number of other
particular things are selected, etc etc.)
So: how can I determine if "Other, please specify" was selected and add the
appropriate event to it? And for that matter, to determine any manner of
specific user selections in order to display hidden sections. Is there an
elegant to put every radiobox/drop down menu/checkbox/etc into one array, or
do I need to select every single thing I want to monitor separately? The
Docs on Selectors doesn't seem to have what I'm after :(
I hope this all makes sense. Sorry for the lengthy post.
cheers
--
View this message in context:
http://n2.nabble.com/dynamic-forms-tp1453236p1453236.html
Sent from the MooTools Users mailing list archive at Nabble.com.
