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:

1. Designate a form field to reveal other fields conditionally. This should be a select field, radio field, or checkbox field.
2. Add this to the “HTML after field” setting for the field that will reveal the other fields:
   <span class="rtec-reveals" data-reveals="lodging"></span>
   Your settings will look something like this:
   
3. You will need the key that is the “lodging” part of the example for use later.
4. Make sure to add this field to your registration form.
5. 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”:
   <span class="rtec-hidden" data-revealed-by="lodging" data-value="Daily Overnight"></span>
   Your settings will look something like this:
6. Match the “lodging” key to the revealer field you created as this let’s 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 condtionally show this field. For example if the “Member Lodging Type” type field has the chosen value “Daily Overnight” then this field will show. Otherwise it will be hidden.
7. Add this to the “Custom JavaScript” field on the “Form” tab:

   function ruUpdateRevealers($rtec) {
   	var revealers = {};
   	$rtec.find('.rtec-reveals').each(function(index) {
   		revealers[index] = {
   			$wrapper : $(this).closest(('.rtec-form-field')),
   			valueSelected :  $(this).closest('.rtec-form-field').find('select').length ? $(this).closest('.rtec-form-field').find('select option:selected').val() : $(this).closest('.rtec-form-field').find('input:checked').val(),
   			reveals : $(this).attr('data-reveals'),
   		}
   	});
   
   	return revealers;
   }
   function ruUpdateRevealedBy($rtec, revealers) {
   	$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));
   			}
   			$.each(revealers,function() {
   				if (revealedBy === this.reveals && revealValue === this.valueSelected) {
   					ruRevealField($wrap,$wrap.find('.rtec-hidden').attr('data-original'));
   				} else {
   					ruHideField($wrap);
   				}
   			})
   		}
   	})
   	$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));
   			}
   			$.each(revealers,function() {
   				if (revealedBy === this.reveals && revealValue === this.valueSelected) {
   					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').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);
   	}
   }
   $('.rtec').each(function() {
   	if ($(this).find('.rtec-form-field').length) {
   		var $rtec = $(this),
   			revealers = ruUpdateRevealers($(this));
   
   		ruUpdateRevealedBy($rtec, revealers)
   		$.each(revealers,function() {
   			this.$wrapper.find('select').on('change',function() {
   				var newRevealers = ruUpdateRevealers($rtec);
   				ruUpdateRevealedBy($rtec, newRevealers)
   			})
   			this.$wrapper.find('input').on('change',function() {
   				var newRevealers = ruUpdateRevealers($rtec);
   				ruUpdateRevealedBy($rtec, newRevealers)
   			})
   		});
   	}
   });

8. The result of the example above should look like this:
9. Conditionally show and hide HTML by wrapping it in a div with the class “rtec-html-wrap”. Example:
   <div class="rtec-html-wrap"><br /> <h4>HTML</h4><br /> <span class="rtec-hidden" data-revealed-by="lodging" data-value="Daily Overnight"></span><br /> </div>
10. You can have multiple groups of conditional fields by changing the key used (“lodging” in this example) and duplicating the steps.