Author: | bomsn |
---|---|
Views Total: | 2,761 views |
Official Page: | Go to website |
Last Update: | July 23, 2024 |
License: | MIT |
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:
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