❤
npm
Sign UpSign In

conditional-field

1.0.2 • Public • Published

Conditional Field

A Javascript component that shows / hides DOM elements based on form values.

Examples and docs: https://stevenwanderski.github.io/conditional-field

alt text

Installation

This plugin requires jQuery. In the HTML page, first include jQuery, then Conditional Field. Be sure to place the <script> tags just before the closing <body> tag. Examples:

Using Bower

Run bower install --save conditional-field. Then load jQuery and ConditionalField on the HTML page:

<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/conditional-field/dist/conditional.min.js"></script>

Using NPM

Run npm install --save conditional-field. Then load jQuery and ConditionalField on the HTML page:

<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/conditional-field/dist/conditional.min.js"></script>

From local file directory

Download dist/conditional-field.min.js and place it in your project directory. Then load jQuery and ConditionField on the HTML page:

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/conditional-field.min.js"></script>

Usage

Select

HTML:

<select class="select-field">
  <option value="mothers">Mothers of Invention</option>
  <option value="spiders">Spiders from Mars</option>
</select>
<div class="zappa">Frank Zappa</div>
<div class="bowie">David Bowie</div>

Javascript:

new ConditionalField({
  control: '.select-field',
  visibility: {
    'mothers': '.zappa',
    'spiders': '.bowie'
  }
});

Radio buttons

HTML:

<label>
  <input type="radio" name="artists" value="mothers" checked> Mothers of Invention
</label>
<label>
  <input type="radio" name="artists" value="spiders"> Spiders from Mars
</label>
 
<div class="zappa">Frank Zappa</div>
<div class="bowie">David Bowie</div>

Javascript:

new ConditionalField({
  control: '[name="artists"]',
  visibility: {
    'mothers': '.zappa',
    'spiders': '.bowie'
  }
});

Checkbox

HTML:

<label>
  <input type="checkbox" class="spiders-checkbox"> Show the Spiders
</label>
 
<div class="zappa">Frank Zappa</div>
<div class="bowie">David Bowie</div>

Javascript:

new ConditionalField({
  control: '.spiders-checkbox',
  visibility: {
    'off': '.zappa',
    'on': '.bowie'
  }
});

Arguments

  • control
    • string (query selector)
    • the form control that visibility is based on
  • visibility
    • JSON object
    • for each key and value, when the control has a value of key, the DOM element with the selector of value will be shown, conversely the other keys will be hidden.

Methods

destroy

Removes the event listeners. Example:

cf = new ConditionalField({
  control: '.spiders-checkbox',
  visibility: {
    'off': '.zappa',
    'on': '.bowie'
  }
});
 
cf.destroy();

Tests

The test suite is built using Mocha and Chai. Download / clone the project locally and run a local web server (my fave: local-web-server). Then navigate to http://localhost:8080/test. The localhost port will need to change based on local setup.

Development

  • Download / clone the project locally
  • Run npm install
  • Run gulp

Coded with ♥ in Chicago by Steven Wanderski

Readme

Keywords

Package Sidebar

Install

npm i conditional-field

Repository

github.com/stevenwanderski/conditional-field

Homepage

stevenwanderski.github.io/conditional-field

Weekly Downloads

26

Version

1.0.2

License

ISC

Last publish

Collaborators

  • stevenwanderski
Try on RunKit
Report malware