Show/Hide Form Fields Conditionally – conditional-fields

conditional-fields is a JavaScript library written in TypeScript that helps developers manage conditional fields in HTML forms. This means you can show or hide certain form fields based on what a user enters in other fields.

Imagine a scenario where a user needs to provide a link to their blog, but only if they have one. With conditional-fields, you can easily implement this. If a user selects ‘Yes’ for a field asking if they have a blog, a new field asking for the blog’s link appears. Conversely, if they select ‘No,’ the ‘blog link’ field remains hidden.

How to use it:

1. Download the package and include the UMD (Universal Module Definition) version of the library in your HTML.

<script src="/dist/conditional-fields.umd.js"></script>

2. Now you have two options for initializing conditional fields: using the setupConditionalFields function or by creating an instance of the ConditionalField class. Both methods offer flexibility in defining how your conditional fields behave. The setupConditionalFields function allows you to define multiple conditional field rules in an array format, while the ConditionalField class offers a more object-oriented approach.

<form class="card">
  <fieldset>
    <div>
      <label class="form-label">
        Do you have a blog?
      </label>
      <div class="form-option">
        <label class="form-check-label">
          <input id="has_blog" name="has_blog" type="radio" value="Yes">
          Yes
        </label>
      </div>
      <div class="form-option">
        <label class="form-check-label">
          <input id="has_blog" name="has_blog" type="radio" value="No">
          No
        </label>
      </div>
    </div>
    <div>
      <label class="form-label" for="blog_link">Link to your blog</label>
      <input class="form-control" type="text" name="blog_link" id="blog_link" placeholder="Link to your blog" required>
    </div>
  </fieldset>
  <fieldset>
    <div>
      <label class="form-label">
        Which services do you use?
      </label>
      <div class="form-option">
        <label class="form-check-label">
          <input id="services_pc" name="services" type="checkbox" value="Streaming">
          Streaming
        </label>
      </div>
      <div class="form-option">
        <label class="form-check-label">
          <input id="services_mob" name="services" type="checkbox" value="E-commerce">
          E-commerce
        </label>
      </div>
      <div class="form-option">
        <label class="form-check-label">
          <input id="services_other" name="services" type="checkbox" value="Other">
          Other
        </label>
      </div>
    </div>
    <div id="services_others_block">
      <div>
        <label class="form-label" for="services_others">Specify other services</label>
        <input class="form-control" type="text" name="services_others" id="services_others" placeholder="Specify other services" required>
      </div>
      <div class="mt-1">
        <label class="form-label" for="devices_number">Number of devices</label>
        <select class="form-control" name="devices_number" id="devices_number">
          <option value="">Select</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3+">3+</option>
        </select>
      </div>
      <div class="mt-1">
        <label class="form-label">
          Do you want additional support?
        </label>
        <div class="form-option">
          <label class="form-check-label">
            <input id="support_yes" name="support" type="radio" value="Yes">
            Yes, I want support.
          </label>
        </div>
        <div class="form-option">
          <label class="form-check-label">
            <input id="support_no" name="support" type="radio" value="No">
            No, thank you
          </label>
        </div>
      </div>
      <div class="mt-1">
        <label class="form-label">
          What additional resources do you need?
        </label>
        <div class="form-option">
          <label class="form-check-label">
            <input id="additional_resources_plugins" name="additional_resources" type="checkbox" value="Plugins">
            Plugins
          </label>
        </div>
        <div class="form-option">
          <label class="form-check-label">
            <input id="additional_resources_ext" name="additional_resources" type="checkbox" value="Extensions">
            Extensions
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <div>
      <label class="form-label" for="payment_method">What is your preferred payment method?</label>
      <select class="form-control" id="payment_method" name="payment_method" required>
        <option value="">Select</option>
        <option value="Credit Card">Credit Card</option>
        <option value="PayPal">PayPal</option>
        <option value="Bank Transfer">Bank Transfer</option>
      </select>
    </div>
    <div>
      <label class="form-label" for="comments">Comments or suggestions</label>
      <textarea class="form-control" id="comments" name="comments" placeholder="Comments or suggestions" required></textarea>
    </div>
  </fieldset>
  <button class="w-100" id="btn">Send</button>
</form>

setupConditionalFields([
  {
    trigger: {
      selector: '#has_blog',
      value: 'Yes',
    },
    affected: {
      fields: [
        {selector: '#blog_link', required: false, associatedElements: ['label[for="blog_link"]']},
      ],
    },
    clearOnHide: false,
    initialCheck: false
  },
  {
    trigger: {
      selector: '[name=services]',
      value: 'Other',
    },
    affected: {
      block: '#services_others_block',
      fields: [
        {selector: '#services_others', required: true},
        {selector: '#devices_number', required: true},
        {selector: '[name=support]', required: true},
        {selector: '[name=additional_resources]', required: true},
      ],
    },
  },
])
new ConditionalField({
  trigger: {
    selector: '#payment_method',
    value: ['PayPal', 'Credit Card', 'Bank Transfer'],
  },
  affected: {
    fields: [
      {selector: '#comments', required: true},
    ],
    parentSelector: (element) => element.parentElement,
  },
})

3. All available options.

• trigger.selector: CSS selector for the trigger field
• trigger.value: Value(s) that activate the conditional field
• affected.fields: Fields to show/hide based on the trigger
• affected.block: CSS selector for a block containing affected fields
• affected.parentSelector: Function to return a field’s parent element
• clearOnHide: Clear dependent field when trigger rule isn’t met
• initialCheck: Check conditional field on initialization

Changelog:

v1.0.3 (10/03/2024)

• Fix number operator logic

v1.0.2 (09/28/2024)

• Add Field Clear Event and Operator logic