🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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).

Conditional-Logic

Documentation

Conditionize

jQuery plugin for forms conditions to show/hide controls depending on its values.

Demo

Getting Started

<script src="conditionize/dist/conditionize.min.js"></script>

CDN

Link directly from unpkg

<script src="https://unpkg.com/conditionize@1/dist/conditionize.min.js"></script>

Set up your HTML

<form class="my-form" action="#">   <h1>Conditionize</h1>      <input type="text" name="text-control" placeholder="Type 'magic'">      <div data-cond="[name=text-control] == magic">Magically show when text control contains 'magic' word.</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>    <label data-cond="[name=select-control] == 3">     <input type="checkbox" name="checkbox-control">     Is checked?     <span data-cond="[name=checkbox-control] != true">Nope</span>     <span data-cond="[name=checkbox-control]">Yep</span>   </label>      <div>     <a href="https://github.com/nk-o/conditionize" data-cond="[name=select-control] == 3 && [name=checkbox-control] == true">GitHub</a>   </div> </form>

Call the plugin

$('.my-form').conditionize({     selector: '[data-cond]' });

Options

Name Type Default Description
selector string [data-cond] Condition blocks jQuery selector.
conditionAttr string data-cond Condition atribute that will be checked.
checkDebounce int 150 Debounce timeout for better performance.

Events

Events used the same way as Options.

Name Description
onInit Called after init end.
onDestroy Called after destroy.
onCheck Called when check function ended work (available 2 arguments [ $item, show ]).
customToggle Custom toggle for conditional blocks. You can define your own function to show/hide blocks.

Example of customToggle function:

{     customToggle: function( $item, show ) {         if ( show ) {             $item.show();         } else {             $item.hide();         }     } }

Methods

Name Result Description
destroy - Destroy Conditionize and set block as it was before plugin init.

Call methods example

$('.my-cond-form').conditionize('destroy');

No conflict

If you already have jQuery.fn.conditionize, you can rename the plugin.

jQuery.fn.newConditionize = jQuery.fn.conditionize.noConflict();

For Developers

Installation

  • Run npm install in the command line. Or if you need to update some dependencies, run npm update

Building

  • npm run build to run build

Linting

  • npm run js-lint to show eslint errors
  • npm run js-lint-fix to automatically fix some of the eslint errors

You May Also Like