A Javascript component that shows / hides DOM elements based on form values.
Examples and docs: https://stevenwanderski.github.io/conditional-field
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:
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>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>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>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'
}
});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'
}
});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'
}
});control- string (query selector)
- the form control that visibility is based on
visibility- JSON object
- for each
keyandvalue, when thecontrolhas a value ofkey, the DOM element with the selector ofvaluewill be shown, conversely the otherkeys will be hidden.
Removes the event listeners. Example:
cf = new ConditionalField({
control: '.spiders-checkbox',
visibility: {
'off': '.zappa',
'on': '.bowie'
}
});
cf.destroy();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.
- Download / clone the project locally
- Run
npm install - Run
gulp
Coded with ♥ in Chicago by Steven Wanderski