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.
The Ultimate JavaScript Bundle: 2 books + 1 course
- SitePoint's latest ebook: Jump Start JavaScript
- Jump Start CoffeeScript ebook
- Backbone.js: A Practical Beginner's Guide online course
Buy now $39 Normally $117 - save 66%
Or get access to all SitePoint's Premium Content with a Learnable membership
