This content originally appeared on DEV Community and was authored by Jaimon Orlé
Need show/hide or enable/disable behavior in a jQuery formBuilder form without patching core? I built a small add-on that layers rules-based conditional logic on top of formBuilder’s builder/renderer.
- Repo: https://github.com/jaimonorle/formBuilder-ConditionalLogic
-
Live demos:
What it does
- Rules like “if X then Y” (e.g., if
have_pet === "yes"→ showpet_type) - Actions: show/hide, enable/disable, setValue
- Works with saved form JSON (no core patching)
- Supports builder and render flows
Tested with formBuilder v3.x.
60-second quick start
1) Include scripts
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formbuilder/dist/form-builder.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/formbuilder/dist/form-builder.min.js"></script>
<!-- The add-on (use your local/dist path) -->
<script src="/path/to/formbuilder-conditional-logic.min.js"></script>
2) Attach rules after the form renders (builder)
<div id="fb"></div>
<script>
$('#fb').formBuilder({}).promise.then(builder => {
const rules = [
{ when: { field: 'have_pet', equals: 'yes' }, then: { show: ['pet_type'] } },
{ when: { field: 'age', gte: 18 }, then: { enable: ['drivers_license'] } },
{ when: { field: 'country', equals: 'DM' }, then: { setValue: { field: 'region', value: 'NE' } } }
];
// Attach to the builder instance
applyConditionalLogic({ rules, on: builder });
});
</script>
3) Or apply to the renderer (saved JSON)
<div id="render-here"></div>
<script>
const formJson = /* load your saved formBuilder JSON */;
const rules = [
{ when: { field: 'newsletter', equals: true }, then: { show: ['email'] } }
];
// Render formBuilder form however you normally do...
// Then attach logic to the rendered instance:
applyConditionalLogic({ rules, on: '#render-here' });
</script>
Rule shape (quick reference)
{
when: {
field: 'age', // form field name
equals: 18, // supported today: equals, gte (more coming)
},
then: {
show: ['drivers_license'],
enable: ['drivers_license'],
// or:
setValue: { field: 'region', value: 'NE' }
}
}
Current status: show/hide, enable/disable, setValue are stable.
Nested/compound conditions are in progress; repeating sections are experimental.
Why this exists
A lot of formBuilder users need simple conditional behavior without switching stacks or forking core. This add-on keeps it drop-in, rule-driven, and works with your existing saved JSON.
Links
- Repo: https://github.com/jaimonorle/formBuilder-ConditionalLogic
- Releases: https://github.com/jaimonorle/formBuilder-ConditionalLogic/releases
- Issues / feedback: https://github.com/jaimonorle/formBuilder-ConditionalLogic/issues
Roadmap (short)
- More comparators:
not,contains,lte,in - Better nested rules / groups
- Typings & examples
- npm package + UMD/CDN build
Support
If this helps you ship faster:
- GitHub Sponsors (org, pending approval): https://github.com/sponsors/Orle-Industries-Global
- Ko-fi: https://ko-fi.com/jaimonorle
- Buy Me a Coffee: https://buymeacoffee.com/jaimonorle
- Liberapay: https://liberapay.com/jaimonorle/
Author: @jaimonorle — OSS maintainer, building practical tools for the jQuery formBuilder ecosystem.
This content originally appeared on DEV Community and was authored by Jaimon Orlé
Jaimon Orlé | Sciencx (2025-11-06T03:14:28+00:00) Conditional logic for jQuery formBuilder in 5 minutes. Retrieved from https://www.scien.cx/2025/11/06/conditional-logic-for-jquery-formbuilder-in-5-minutes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.