conditional-field
Advanced tools
Javascript component that shows and hides page elements based on form field values
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
visibility
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.destroyRemoves 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.
npm installgulpCoded with ♥ in Chicago by Steven Wanderski
FAQs
Javascript component that shows and hides page elements based on form field values
We found that conditional-field demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 advances 11 JavaScript proposals, with two moving to Stage 4, bringing better math, binary APIs, and more features one step closer to the ECMAScript spec.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.