Mikko Ohtamaa: Create complex form field showing and hiding rules with jQuery Interdependencies library

jQuery Interdependencies is a library to create rules for showing and hiding form fields dynamically on your HTML form. It’s use case are the situations where the form filling can take different decision tree paths and the field choices and values affect other fields. The most common scenario is that you have  a “please specify” style text field which becomes available if the user marks a certain checkbox choice.

Test the simple demo above online. This is what the rule code for the above form looks like (see the orignal blog post for syntax highlighting):

// Start creating a new ruleset
var ruleset = $.deps.createRuleset();

// Show diet text input option only when special diet option is selected
var dietRule = ruleset.createRule("#diet", "==", "special");
dietRule.include("#special-diet");

// Make these fields visible when user checks hotel accomodation
var hotelRule = ruleset.createRule("#accomodation", "==", true);
hotelRule.include("#adults");
hotelRule.include("#children");

// Make the ruleset effective on the whole page
ruleset.install();

However, jQuery Interdependecies can do much more. Using the jQuery Interdependecies library simplifies the process of creating form logic rules over vanilla Javascript / jQuery a lot.

• Your code does become a spaghetti of ifs, elses and Javascript callback functions
• It is not limited to an input type, but works with all HTML controls: text, checkbox, radio button, select dropdown, etc.
• It correctly handles nested decision trees, where your form 1st level choice reveals 2nd level choices which in turn reveal 3rd level choices and so on
• It works well with dynamically generated forms and situations where there are multiple forms on a single page
• It has API documentation based on JSDuck. Everyone loves good documentation.
• It is independent from any HTML markup or form framework: you can use it in any project

So, let’s a have little more complex example what we can do:

The example above is from real life system, but you can try the simplified demo version online.

Enjoy - jQuery Interdependencies Github.

 Subscribe to this blog in a readerFollow me on TwitterFollow me on Facebook