jQuery Plugin For Conditional Form Fields - conditionize.js

File Size: 8.01 KB
Views Total: 16233
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Conditional Form Fields - conditionize.js

A minimal JQuery plugin (~1kb) for handling conditional form fields that allow to smartly show or hide fields of sections of your webpage based on user input. 

Basic Usage:

1. Load the jQuery conditionize.js plugin after jQuery library, but before the closing body tag.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
<script src="conditionize.flexible.jquery.js"></script>

2. Customize the condition you want to use in the data-condition attribute as these:

<p><label><input type="checkbox" id="example1"> Are you sure?</label></p>
<p class="conditional" data-condition="#example1">
  <label><input type="checkbox" name="example2"> Really super sure?</label>
<p class="conditional" data-condition="#example1 && example2">
  <label>Then type "yay": </label>
  <input type="text" id="example3" placeholder="yay">
<!-- This will be shown only if BOTH examle1 and examle2 are checked AND 'yay' typed in examle3 -->
<p class="conditional msg" 
   data-condition="#example1 && example2 && #example3 == 'yay'"> 
   Both are selected and YAY is typed!
  <label>Pick two or three:</label>
  <select class="select" name="example5">
    <option value="one">One!</option>
    <option value="two">Two!</option>
    <option value="three">Three!</option>
    <option value="four">Four!</option>
<div class="conditional msg" 
   See?! It works with selects!

3. Initialize the plugin.




  • Improvement


  • Updated conditionize.flexible.jquery.js (Improved version of conditionize.js.)


  • Support any js statement


  • add ability to listen to list of fields


  • Allow for arbitrary comparison operators


  • Added support for selects and text inputs.

This awesome jQuery plugin is developed by renvrant. For more Advanced Usages, please check the demo page or visit the official website.