Conditional Field

Javascript component that shows and hides page elements based on form field values

Download View on Github

This plugin requires jQuery. In the HTML page, first include jQuery, then Conditional Field. Be sure to place the script tags just before the closing body tag.

Example:

HTML 

            
            <!DOCTYPE html>
            <html>
            <head>
              ...
            </head>
            <body>
              ...
              <script src="/path/to/jquery.js"></script>
              <script src="/path/to/conditional-field.js"></script>
            </body>
            </html>

The script tags can also be placed in the head tag. If doing so, all calls to Conditional Field must be wrapped in a $(document).ready() block.

Example:

Javascript 

            $(document).ready(function(){

              new ConditionalField({
                ...
              });

            });

Using Bower

Run bower install --save conditional-field, then reference the files in the HTML page.

Using NPM

Run npm install --save conditional-field, then reference the files in the HTML page.

Manual download

Download conditional-field.min.js and place it in your project directory. Then reference the files in the HTML page.

Select

Example
HTML 

              

                <label>Payment Method:</label>
                <select class="select-field">
                  <option value="credit">Credit Card</option>
                  <option value="check">Check</option>
                </select>

                <div class="credit">
                  <label>Card Number:</label>
                  <input type="text" />
                </div>

                <div class="check">
                  <label>Check number:</label>
                  <input type="text" name="check_number" />
                </div>
Javascript 

              new ConditionalField({
                control: '.select-field',
                visibility: {
                  'credit': '.credit',
                  'check': '.check'
                }
              });

Radio Button

Example
HTML 

              

                <label>Payment Method:</label>
                <label class="label-radio">
                  <input type="radio" name="payment" value="credit" class="payment-radios" checked/> Credit Card
                </label>
                <label class="label-radio">
                  <input type="radio" name="payment" value="check" class="payment-radios" /> Check
                </label>

                <div class="credit">
                  <label>Card Number:</label>
                  <input type="text" />
                </div>

                <div class="check">
                  <label>Check number:</label>
                  <input type="text" name="check_number" />
                </div>
Javascript 

              new ConditionalField({
                control: '.payment-radios',
                visibility: {
                  'credit': '.credit',
                  'check': '.check'
                }
              });

Checkbox

Example
HTML 

              

                <label>
                  <input type="checkbox" class="payment-checkbox"> Pay with Check
                </label>

                <div class="credit">
                  <label>Card Number:</label>
                  <input type="text" />
                </div>

                <div class="check">
                  <label>Check number:</label>
                  <input type="text" name="check_number" />
                </div>
Javascript 

              new ConditionalField({
                control: '.payment-checkbox',
                visibility: {
                  'off': '.credit',
                  'on': '.check'
                }
              });
Name Type Description
control string (element selector) Form element used to determine visibility of connected elements. The value of this element will be used to find the matching value in the visibility option.
visibility JSON object

The keys provided in this object are used to match the value of the control element. When the control value matches a key, the corresponding element will be shown and all other elements provided in this object will be hidden. The provided object must follow this structure:


                {
                  'control-value': 'element-selector'
                }