JavaScript
Article
By Simon Willison

Easy bulk changes with DHTML

By Simon Willison
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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:

--ADVERTISEMENT--


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.

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?