Can I Use Conditional Logic in Registration Forms?

The Registrations for the Events Calendar plugin does not yet support conditional fields. In the meantime we have a workable custom solution you can try that works with standard form fields AND the Multiple Venues and Tiers (MVT) field:

For Standard Form Fields (Select, Radio, Checkbox)

Designate a form field to reveal other fields conditionally. This should be a select field, radio field, or checkbox field.
Add this to the “HTML after field” setting for the field that will reveal the other fields:
```

```
Your settings will look something like this:
You will need the key that is the “lodging” part of the example for use later.
Make sure to add this field to your registration form.
Add this to the “HTML after field” setting for each field you wish to reveal conditionally based on the value of the field you created as the “revealer”:
```

```
Your settings will look something like this:
Match the “lodging” key to the revealer field you created as this lets the code know what field to check in order to conditionally reveal this field. The “Daily Overnight” part of the HTML determines the value of the revealing field that will conditionally show this field. For example if the “Member Lodging Type” field has the chosen value “Daily Overnight” then this field will show. Otherwise it will be hidden.

For Multiple Venues and Tiers (MVT) Field

The MVT field can now be used as a revealer field! The JavaScript code automatically detects the MVT field, so no special setup is needed for the revealer itself.

For fields that should be revealed based on MVT selection, add this to the “HTML after field” setting:
```

```
Replace “mvt1” with the actual MVT ID (mvt1, mvt2, etc.) that should trigger the reveal. You can find the MVT ID by inspecting the form HTML or checking your event settings.
The MVT field uses radio buttons, so the value will be the MVT ID (like “mvt1”, “mvt2”, etc.) which corresponds to the venue/tier option selected.

Custom JavaScript

Add this to the “Custom JavaScript” field on the “Form” tab:

function ruUpdateRevealers($rtec) {
    var revealers = {};

    // Check standard form fields
    $rtec.find('.rtec-reveals').each(function (index) {
        var $wrapper = $(this).closest('.rtec-form-field');
        if ($wrapper.length) {
            revealers['field_' + index] = {
                $wrapper: $wrapper,
                valueSelected: ruGetFieldValue($wrapper),
                reveals: $(this).attr('data-reveals'),
            };
        }
    });

    // Check MVT field
    $rtec.find('.rtec-mvt-wrapper').each(function (index) {
        var $mvtWrapper = $(this);
        var $checkedRadio = $mvtWrapper.find('.rtec-venue-mvt-input:checked');
        if ($checkedRadio.length) {
            revealers['mvt_' + index] = {
                $wrapper: $mvtWrapper,
                valueSelected: $checkedRadio.val(),
                reveals: 'mvt_venue', // Default key for MVT
            };
        } else {
            // Also track MVT even if nothing selected yet
            revealers['mvt_' + index] = {
                $wrapper: $mvtWrapper,
                valueSelected: '',
                reveals: 'mvt_venue',
            };
        }
    });

    return revealers;
}

function ruGetFieldValue($field) {
    if ($field.find('select').length) {
        return $field.find('select option:selected').val();
    } else if ($field.find('input[type=radio]:checked').length) {
        return $field.find('input[type=radio]:checked').val();
    } else if ($field.find('input[type=checkbox]:checked').length) {
        return $field.find('input[type=checkbox]:checked').val();
    } else if ($field.find('input[type=text]').length) {
        return $field.find('input[type=text]').val();
    }
    return '';
}

function ruUpdateRevealedBy($rtec, revealers) {
    // Update standard form fields
    $rtec.find('.rtec-form-field').each(function () {
        if ($(this).find('.rtec-hidden').length) {
            var $wrap = $(this),
                revealedBy = $(this).find('.rtec-hidden').attr('data-revealed-by'),
                revealValue = $(this).find('.rtec-hidden').attr('data-value');

            if (typeof $(this).find('.rtec-hidden').attr('data-original') === 'undefined') {
                $(this).find('.rtec-hidden').attr('data-original', ruCustomFormGetVal($wrap));
            }

            var shouldReveal = false;
            $.each(revealers, function () {
                if (revealedBy === this.reveals && revealValue === this.valueSelected) {
                    shouldReveal = true;
                }
            });

            if (shouldReveal) {
                ruRevealField($wrap, $wrap.find('.rtec-hidden').attr('data-original'));
            } else {
                ruHideField($wrap);
            }
        }
    });

    // Update HTML wraps
    $rtec.find('.rtec-html-wrap').each(function () {
        if ($(this).find('.rtec-hidden').length) {
            var $wrap = $(this),
                revealedBy = $(this).find('.rtec-hidden').attr('data-revealed-by'),
                revealValue = $(this).find('.rtec-hidden').attr('data-value');

            if (typeof $(this).find('.rtec-hidden').attr('data-original') === 'undefined') {
                $(this).find('.rtec-hidden').attr('data-original', ruCustomFormGetVal($wrap));
            }

            var shouldReveal = false;
            $.each(revealers, function () {
                if (revealedBy === this.reveals && revealValue === this.valueSelected) {
                    shouldReveal = true;
                }
            });

            if (shouldReveal) {
                ruRevealField($wrap, $wrap.find('.rtec-hidden').attr('data-original'));
            } else {
                ruHideField($wrap);
            }
        }
    });
}

function ruRevealField($field, originalVal) {
    $field.show();
    ruCustomRemoveNA($field, originalVal);
}

function ruHideField($field) {
    $field.hide();
    ruCustomSetToNA($field);
}

function ruCustomFormGetVal($field) {
    if ($field.find('input[type=checkbox]').length) {
        return $field.find('input[type=checkbox]').first().val();
    } else if ($field.find('input').length) {
        return $field.find('input').first().val();
    } else if ($field.find('select').length) {
        return $field.find('select').first().val();
    } else if ($field.find('textarea').length) {
        return $field.find('textarea').first().val();
    }
    return false;
}

function ruCustomSetToNA($field) {
    if ($field.find('input[type=checkbox]').length) {
        $field.find('input[type=checkbox]').first().val('NA');
        $field.find('input[type=checkbox]').first().prop('checked', true);
    } else if ($field.find('input').length) {
        $field.find('input').first().val('NA');
    } else if ($field.find('select').length) {
        $field.find('select option').first().val('NA').prop('selected', true);
    } else if ($field.find('textarea').length) {
        $field.find('textarea').first().text('NA');
    }
}

function ruCustomRemoveNA($field, original) {
    if ($field.find('input[type=checkbox]').length) {
        $field.find('input[type=checkbox]').first().val(original);
        $field.find('input[type=checkbox]').first().prop('checked', false);
    } else if ($field.find('input').length) {
        $field.find('input').first().val(original);
    } else if ($field.find('select').length) {
        $field.find('select option').first().val(original);
    } else if ($field.find('textarea').length) {
        $field.find('textarea').first().text(original);
    }
}

// Initialize on page load
$('.rtec').each(function () {
    if ($(this).find('.rtec-form-field').length || $(this).find('.rtec-mvt-wrapper').length) {
        var $rtec = $(this),
            revealers = ruUpdateRevealers($(this));

        ruUpdateRevealedBy($rtec, revealers);

        // Set up event listeners for standard form fields
        $.each(revealers, function (key, revealer) {
            if (key.indexOf('field_') === 0) {
                revealer.$wrapper.find('select').on('change', function () {
                    var newRevealers = ruUpdateRevealers($rtec);
                    ruUpdateRevealedBy($rtec, newRevealers);
                });
                revealer.$wrapper.find('input').on('change', function () {
                    var newRevealers = ruUpdateRevealers($rtec);
                    ruUpdateRevealedBy($rtec, newRevealers);
                });
            }
        });

        // Set up event listeners for MVT field
        $rtec.find('.rtec-mvt-wrapper').each(function () {
            var $mvtWrapper = $(this);
            $mvtWrapper.find('.rtec-venue-mvt-input').on('change', function () {
                var newRevealers = ruUpdateRevealers($rtec);
                ruUpdateRevealedBy($rtec, newRevealers);
            });
        });
    }
});

Results

Examples

Example 1: Standard Field Revealing Other Fields

Field “Member Lodging Type” (select field) with value “Daily Overnight” reveals “Room Preference” field
Add to “Member Lodging Type” HTML after field: 
Add to “Room Preference” HTML after field:

Example 2: MVT Field Revealing Other Fields

MVT field with option “mvt1” (VIP Tier) reveals “VIP Meal Preference” field
The MVT field is automatically detected, no HTML needed for the revealer
Add to “VIP Meal Preference” HTML after field:

Example 3: Conditionally Show HTML

Conditionally show and hide HTML by wrapping it in a div with the class “rtec-html-wrap”. Example:

<div class="rtec-html-wrap">
	<h4>Special Instructions</h4>
	<span class="rtec-hidden" data-revealed-by="mvt_venue" data-value="mvt1"></span>
</div>

Notes

You can have multiple groups of conditional fields by changing the key used (“lodging” or “mvt_venue” in these examples) and duplicating the steps.
The MVT field values are the MVT IDs (mvt1, mvt2, etc.) which you can find in the event settings or by inspecting the form HTML.
Make sure the data-value attribute exactly matches the value of the revealer field (case-sensitive).