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

Category: Form , Javascript | July 23, 2024
Author:bomsn
Views Total:2,761 views
Official Page:Go to website
Last Update:July 23, 2024
License:MIT

Preview:

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

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:

07/23/2024

  • module fixes

07/11/2024

  • add support to multi-select fields

03/11/2024

  • Bugfix

06/15/2022

  • v1.0.4: Bugfix

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

You Might Be Interested In:


Leave a Reply