Press "Enter" to skip to content

JavaScript Library Allows To Show/Hide HTML Elements | MF Conditional Fields

MF Conditional Fields is a JavaScript library that shows/hides form elements based on the value of one or more fields.

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

How to make use of it:

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

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

2. Define guidelines for conditional type fields.

<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 shape factor and complete.

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

4. The library additionally helps dynamic HTML type the place the customers are in a position so as to add & take away type fields.

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

Toggle Visibility Of HTML Elements Based On Form Values, MF Conditional Fields Plugin/Github

mf-conditional-rules


See Demo And Download

Official Website(bomsn): Click Here

This superior jQuery/javascript plugin is developed by bomsn. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

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