Display Form Fields Based On Selection Using jQuery

With this little jQuery plugin, you can easily display form fields based on selection. It works with text and dropdown fields.

When users type something in the input type text filed, the custom text will be display just right now below it.

It also allows you to show any kind of input type field when you select the value from the dropdown. This plugin helps you to easily show the form fields according to the condition.

The plugin supports almost all kinds of input form fields. These fields include a text box, checkbox, dropdown, radio input type. Let’s show/hide any type of field by just adding the plugin to your website.

Furthermore, it’s a lightweight and highly configurable plugin for jQuery. All you need to define the condition into the input field by using the HTML5 data-attribute.

How to Show Form Fields Based On Selection

To get started with the implementation, You need to add the jQuery plugin file into your document. If you have already one then don’t need to add it.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Next thing we need to include the stylesheet and the condition script file.

<link rel="stylesheet" href="dist/style.css">
<script src="dist/conditionize.min.js"></script>

After that, we will create the HTML form with condition data like below:

<form class="my-form" action="#">
  <h1>Conditionize</h1>
  <input type="text" name="text-control" placeholder="Type 'magic'">
  <div data-cond="[name=text-control] == magic">Magically show when text control contains 'magic' word.</div>
  <select name="select-control">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three. Wow, you will see the new control below...</option>
  </select>

  <div data-cond="[name=select-control] == 3">
    <label>
      <input type="checkbox" name="checkbox-control">
      Is checked?
      <span>
        <span data-cond="[name=checkbox-control] != true">Nope</span>
        <span data-cond="[name=checkbox-control]">Yep</span>
      </span>
    </label>
  </div>
  
  <div data-cond="[name=select-control] == 3 && [name=checkbox-control] == true">
    <a href="https://github.com/nk-o/conditionize">GitHub</a>
  </div>
</form>

The Javascript

In the end, we will initialize the form function by adding the following script to active the conditionize

<script>
$('.my-form').conditionize( {
  checkDebounce: 0,
  customToggle: function( $item, show ) {
    if ( show ) {
      $item.stop().slideDown(200);
    } else {
      $item.stop().slideUp(200);
    }
  }
});
</script>

Configuration Options

The following are some advanced configuration options to create jQuery based display form fields based on selection.

$('.my-form').conditionize({
	selector : [data-cond],
});

$('.my-form').conditionize({
	conditionAttr : data-cond,
});

$('.my-form').conditionize({
	checkDebounce : 150,
});

That’s it. Let’s implement and let me know how this plugin help you.