Andy Clarke has published a neat new technique called Trimming form fields, which uses beautiful unobtrusive DHTML to allow users to toggle the visibility of optional form fields for easier completion of forms. Andy’s code is very tidy and you should go and read his tutorial, because I’m about to extend on it.
Andy’s code works by cycling through each div on the page, looking for those with class fm-optional and toggling their display value. This works just fine, but there’s actually a more effective way of achieving the same effect. Instead of toggling a whole bunch of individual elements, change the class on an element that contains all of those that you wish to toggle and use a simple CSS selector to target the contained elements.
I’ve demonstrated this alternative technique on this page (adapted from Andy’s example). Here’s the CSS:
form.remove div.fm-optional {
display: none;
}
And the link event handler:
toggle.onclick = function() {
if (/remove/i.exec(this.firstChild.nodeValue)) {
this.firstChild.nodeValue = 'Display optional fields?';
document.getElementById('example-form').className = 'remove';
} else {
this.firstChild.nodeValue = 'Remove optional fields?';
document.getElementById('example-form').className = 'display';
}
return false;
}
The above code could certainly be improved – for example, it doesn’t deal with the possibility of the form having one or more existing classes that need to be maintained. It serves as a useful demonstration of how bulk changes can be made to a document by switching just a single class on a containing element.
Related posts:
- Techy Treasures #4: What’s inside a dollar function? The $ function is a common feature of all of...
- Implementing Event Latency in JavaScript Craig provides some useful JavaScript code to slow down event...
- The Two Ways of Sizing Absolute Elements in CSS Most developers have used left, right, top and bottom properties...
- Styling the html and body Elements One of the most common ways to begin a...
- The 5 Most Under-Used HTML Tags It is easy to forget some of the lesser-known HTML...
Wow, what luck. I’m about to start on a project that required me to come up with a way to do this. Thanks for posting it!
July 8th, 2004 at 2:54 pm
I wasn’t aware of this pattern matching function in javascript, maybe it could be a nice blog entry :)
July 8th, 2004 at 6:34 pm
Very slick. There’s some lateral thinking for you
July 23rd, 2004 at 12:32 pm
I like this idea, but could it be modified to work as a toggle for an either/or scenario?
Let’s say I need to have a radio group that switches back and forth between personal or company fields. All the name, address, phone stuff stays the same, but the personal job description dropdown has different things in it than the company job description dropdown. Also, there is no reason to show a Company field if the person filling in the subscription form doesn’t work for a company.
So instead of toggling the non-required form fields, could it be adapted to work on a radio group?
August 6th, 2006 at 4:02 pm