Toggle Visibility Of HTML Elements Based On Form Values – MF Conditional Fields

Preview:

Description:

A JavaScript library for creating conditional form fields that toggle the visibility of any HTML elements according to the value you selected in the previous form field.

How to use it:

1. Download and load the MF Conditional Fields library in the HTML page.

<script src="./src/mf-conditional-fields.js"></script>

2. Define rules for conditional form fields:

• field: form field
• container: parent container
• action: “show” or “hide”
• logic: “or” or “and”
• rules.name: parent field
• rules.operator: “is”, “isnot”, “greaterthan”, “lessthan”, “contains”, “doesnotcontain”, “beginswith”, “doesnotbeginwith”, “endswith”, “doesnotendwith”, “isempty”, “isnotempty”
• rules.value: the parent field value must match this value

<script type="text/x-rules" id="rules-mf-conditional-fields">
[
   {
      "field":"dependant_field",
      "container":".form-group",
      "action":"show",
      "logic":"or",
      "rules":{
         "name":"parent_field",
         "operator":"is",
         "value":"yes"
      }
   },
   {
      "field":"dependant_container",
      "container":".alert-primary",
      "action":"hide",
      "logic":"or",
      "rules":{
         "name":"parent_field",
         "operator":"is",
         "value":"yes"
      }
   },
   {
      "field":"dependant_container2",
      "container":".alert-primary",
      "action":"show",
      "logic":"or",
      "rules":[
         {
            "name":"gender",
            "operator":"is",
            "value":"male"
         },
         {
            "name":"gender",
            "operator":"is",
            "value":"female"
         }
      ]
   },
   {
      "field":"dependant_field2",
      "container":".form-group",
      "action":"show",
      "logic":"or",
      "rules":{
         "name":"gender",
         "operator":"is",
         "value":"other"
      }
   }
]
</script>

3. Initialize the MF Conditional Fields on the form element and done.

// for inline form field
mfConditionalFields('#example', 'inline');

// for multiple form fields
mfConditionalFields(‘#example’, ‘block’);

4. The library also supports dynamic HTML form where the users are able to add & remove form fields.

mfConditionalFields('#example', 'block', true);
let mfEvent = new CustomEvent("mfConditionalFormUpdated", { 
  "detail": { "action": "add" 
}});
document.getElementById('example').dispatchEvent(mfEvent);

Changelog:

05/22/2022

• Add minification process and minified version

05/04/2021

• fixed: error when the field container doesn’t exist

04/24/2021

• Fix (Maximum call stack size exceeded) on deep conditions

03/29/2021

• complete support for multiple checkbox inputs

03/12/2021

• fix bug: logic not triggered when passing an element object directly

03/05/2021

• Code formatting

03/01/2021

• Added support to enable/disable field actions

02/25/2021

• Bugfix