Display Form Fields Based on Selection using jQuery – conditionize

How to Display Form Fields Based On Selection

1. To display form fields based on selection, we need to getting started with conditionize jQuery plugin. So, first of all load the jQuery JS library into your HTML document.

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

2. After that, include plugin assets (from downloaded directory) in your web project.

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

3. Create 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>

4. Finally, add the follwing 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>