Tools, Development

Hide form elements easily with conditionize.js

When working with forms it’s common to hide or show form elements based on a condition, this involved writing javascript to check for a change on the chosen element once detected then activate a show or hide code snippet. Whilst that works well it can be time consuming and tedious when doing multiple conditions. 

This is where a conditionize.js comes in.

“A small jQuery plugin for handling showing and hiding things conditionally based on input - typically groups of form fields. It works using data attributes to keep all of the name/values for inputs directly in the markup and saves you the trouble of having to manually show/hide a bunch of stuff through JS, as well as improving maintenance if you need to change the name or value of an input you were listening to.”

Using this library it’s easy to have multiple conditions or complex nested blocks shown or hidden using nothing more than classes and data attributes!

See this brilliant demo created by Renee Vrantsidis

See the Pen conditionize.js - Conditional Form Fields w/ Data Attributes by Renee Vrantsidis (@renvrant) on CodePen.

David Carr

David Carr

For the past 12 years, I’ve been developing applications for the web using mostly PHP. I do this for a living and love what I do as every day there is something new and exciting to learn.

In my spare time, the web development community is a big part of my life. Whether managing online programming groups and blogs or attending a conference, I find keeping involved helps me stay up to date. This is also my chance to give back to the community that helped me get started, a place I am proud to be apart of.

Besides programming I love spending time with friends and family and can often be found together going out catching the latest movie, staying in playing games on the sofa or planning a trip to someplace I’ve never been before.