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

Posted on by

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 RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

10 thoughts on “Create complex form field showing and hiding rules with jQuery Interdependencies library”

  1. Pingback: JSSpy » Jquery roundup: pickadate.js, jquery interdependencies, timer.js

  2. Thanks for this useful post, i try to make a complex form and i’ll look into your Jquery implementation…

  3. Hello,

    Do you know how to NOT sent the input fields which are hidden?

  4. Unfortunately all hidden fields are send with form HTTP POST.

    Usually the solution is to not to process hidden fields on the server-side.

  5. So, do I have to check on the server-side if a field has the style “display:none” to avoid its processing?

  6. The library does not take any opinions on the server-side processing and you’ll always need to verify client input on the server side any case. Hopefully this helps.

  7. I do verify client input on the server side: an exception is thrown, which avoids inserting bad data in the database in case there is a bug in the client validation logic or a malicious user. The exception have a meaningful message that gets displayed on an error page, so the user can return back and make corrections.

    The thing is, by using this library now some logic is required to either clear or ignore the hidden fields during client and server validation, because the user does not expect to take care of what cannot be seen.

    Client: if “diet” is normal, clear or do not complaint to the client about filled “considerations” text field. Server: if client-side logic does not clear hidden fields, do not set “considerations” when “diet” is normal.

    I wonder if it would be easy to add some postprocessing option every time a rule is fired.

    Anyway, the forms I am developing are not complex, so this library is very useful to me.

Leave a Reply

Your email address will not be published. Required fields are marked *