Jaimon Orlé

Posted on Nov 6

Conditional logic for jQuery formBuilder in 5 minutes

#javascript #jquery #forms #opensource

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:
- Builder: https://jaimonorle.github.io/formBuilder-ConditionalLogic/demo/builder-static.html
- Render: https://jaimonorle.github.io/formBuilder-ConditionalLogic/demo/render-static.html

What it does

Rules like “if X then Y” (e.g., if have_pet === "yes" → show pet_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.

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.

DEV Community