Display Form Fields Based On Selection Using jQuery

Category: Text & Input | November 22, 2019
Display Form Fields Based On Selection Using jQuery
Author: nk-o
Official Page: Go to Website
Last Update:November 22, 2019
License:MIT

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.

OptionDefaultTypeDescription
selector[data-cond]StringThe selector for the condition.

Example:

$('.my-form').conditionize({
	selector : [data-cond],
});
conditionAttrdata-condStringThe HTML5 data attribute will be checked for condition.

Example:

$('.my-form').conditionize({
	conditionAttr : data-cond,
});
checkDebounce150NumberDebounce timeout for better performance.

Example:

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

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

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.