Conditionally Toggle Form Controls Conditionize - Free Download Conditionally Toggle Form Controls Based On Values - Conditionize

Free Download Conditionally Toggle Form Controls Based On Values – Conditionize

By Posted on

This time I will share jQuery Plugin and tutorial about Conditionally Toggle Form Controls Based On Values – Conditionize, hope it will help you in programming stack.

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

Demo Download

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.

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.min.js"
2         integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
3         crossorigin="anonymous"></script>
4 <script src="dist/conditionize.min.js"></script>

2. Apply the condition logic to form controls using the data-cond attribute as follows:

view source
01 <form class="example" action="#">
02  
03   <input type="text" name="text-control" placeholder="Type 'jQueryScript'">
04  
05   <div data-cond="[name=text-control] == jQueryScript">Text To Show Once You Typed 'jQueryScript'.</div>
06  
07   <select name="select-control">
08     <option value="1">One</option>
09     <option value="2">Two</option>
10     <option value="3">Three. Wow, you will see the new control below...</option>
11   </select>
12  
13   <div data-cond="[name=select-control] == 3">
14     <label>
15       <input type="checkbox" name="checkbox-control">
16       Is checked?
17       <span>
18         <span data-cond="[name=checkbox-control] != true">Nope</span>
19         <span data-cond="[name=checkbox-control]">Yep</span>
20       </span>
21     </label>
22   </div>
23  
24   <div data-cond="[name=select-control] == 3 && [name=checkbox-control] == true">
25     <a href="https://github.com/nk-o/conditionize" rel="nofollow" target="_blank">GitHub</a>
26   </div>
27    
28 </form>

3. Hide the conditional form fields on page load.

view source
1 [data-cond] {
2   display: none;
3 }

4. Call the function on the form and done.

view source
1 $(function(){
2  
3   $('.example').conditionize();
4  
5 });

5. Customize the default selector & attribute:

view source
1 $('.example').conditionize({
2   selector: '[data-cond]',
3   conditionAttr: 'data-cond'
4 });

6. Specify how often to check the condition logic.

view source
1 $('.example').conditionize({
2   checkDebounce: 150
3 });

7. Customize the toggle function.

view source
1 $('.example').conditionize({
2   // function( $item, show ) { $item[ show ? 'show' : 'hide' ](); }
3   customToggle: null,
4 });

8. Event handlers.

view source
01 $('.example').conditionize({
02   // function() {}
03   onInit: null,
04  
05   // function() {}
06   onDestroy: null,
07  
08   // function( $item, show ) {}
09   onCheck: null,
10 });

Changelog:

v1.0.5 (2020-05-30)

  • fixed radio button bug

v1.0.4 (2020-01-21)

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.

Related posts: