Conditionally Toggle Form Controls Based On Values - Conditionize
File Size: | 127 KB |
---|---|
Views Total: | 1593 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Conditionize is a jQuery plugin that toggles the visibility of form controls based on the value(s) of a form field (input, select, checkbox, etc).
How to use it:
1. Download and place the JavaScript file conditionize.min.js
after jQuery library.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="dist/conditionize.min.js"></script>
2. Apply the condition logic to form controls using the data-cond
attribute as follows:
<form class="example" action="#"> <input type="text" name="text-control" placeholder="Type 'jQueryScript'"> <div data-cond="[name=text-control] == jQueryScript">Text To Show Once You Typed 'jQueryScript'.</div> <select name="select-control"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three. Wow, you will see the new control below...</option> </select> <div data-cond="[name=select-control] == 3"> <label> <input type="checkbox" name="checkbox-control"> Is checked? <span> <span data-cond="[name=checkbox-control] != true">Nope</span> <span data-cond="[name=checkbox-control]">Yep</span> </span> </label> </div> <div data-cond="[name=select-control] == 3 && [name=checkbox-control] == true"> <a href="https://github.com/nk-o/conditionize" rel="nofollow" target="_blank">GitHub</a> </div> </form>
3. Hide the conditional form fields on page load.
[data-cond] { display: none; }
4. Call the function on the form
and done.
$(function(){ $('.example').conditionize(); });
5. Customize the default selector & attribute:
$('.example').conditionize({ selector: '[data-cond]', conditionAttr: 'data-cond' });
6. Specify how often to check the condition logic.
$('.example').conditionize({ checkDebounce: 150 });
7. Customize the toggle function.
$('.example').conditionize({ // function( $item, show ) { $item[ show ? 'show' : 'hide' ](); } customToggle: null, });
8. Event handlers.
$('.example').conditionize({ // function() {} onInit: null, // function() {} onDestroy: null, // function( $item, show ) {} onCheck: null, });
Changelog:
v1.0.5 (2020-05-30)
- fixed radio button bug
v1.0.4 (2020-01-21)
- update
v1.0.3 (2019-11-22)
- update
v1.0.2 (2019-11-04)
- removed rafl usage (causes bugs in Visual Portfolio when no tab active)
v1.0.1 (2018-11-13)
- fixed usage of global $ variable, use jQuery instead
This awesome jQuery plugin is developed by nk-o. For more Advanced Usages, please check the demo page or visit the official website.