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();
- 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.