Grav conditional field rendering logic using jQuery and YAML properties rendering as data-* attributes

form-excerpt.yaml

            - name: had-allergies
              label: 'Have you ever had any allergies to medicines or other substances (such as Latex)?'
              type: radio
              options:
                yes: Yes
                no: No
              validate:
                required: true
              classes: question

            - name: allergies
              label: "Please list any allergies you've had."
              type: textarea
              classes: follow-up
              rows: 4
              data-attributes:
                substitute: "If so, please list any allergies you've had."
                depends:
                  had-allergies
                depends-eq:
                  yes
              placeholder: 'Which allergic reactions have you had?'

forms.js

jQuery(document).ready(function($) {

	XDate.parsers.push(parseRelDate);

	// *** Form control dependency magic
	// ***
	$('[data-depends]').each( function() {  // TODO: only currently works/tested on radio, date, checkbox, checkboxes list inputs
		var dependantControl = $(this);
		dependantControl.hide();
		$("[name='data[" + dependantControl.data('depends') + "]']").parents('[data-grav-field]').add("[data-grav-field-name='data[" + dependantControl.data('depends') + "]']").each( function() {
			console.log($(this).data('grav-field'));
			switch($(this).data('grav-field')) {
				case 'radio':
					console.log('radio!');
					determiningName = ($(this).find('input:radio').first().attr('name'));
					$("[name='" + determiningName + "']").change( function() {
						// console.log($(this).val());
						// console.log(dependantControl.data('depends-eq'));
						if ( $(this).val() == dependantControl.data('depends-eq') ) {
							dependantControl.show();
						}
						else {
							dependantControl.hide();
						}
					});
					break;
				case 'date':
					console.log('date!');
					determiningName = ($(this).find('input[type=date]').first().attr('name'));
					$("[name='" + determiningName + "']").change( function() {
						// console.log( new XDate('-16y') );
						var show;
						if ( dependantControl.data('depends-eq') !== undefined ) {
							show = ( $(this).val() == dependantControl.data('depends-eq') );
						}
						else {
							// console.log('not an -eq thing');
							if ( dependantControl.data('depends-gte') !== undefined ) {
								// console.log($(this).val());
								var gte = new XDate(dependantControl.data('depends-gte')).toString('yyyy-mm-dd');
								show = ( $(this).val() >= gte );
							}
							if ( (show !== false) && (dependantControl.data('depends-lte') !== undefined) ) {
								// console.log($(this).val());
								var lte = new XDate(dependantControl.data('depends-gte')).toString('yyyy-mm-dd');
								show = ( $(this).val() <= lte );
							}
						}
						if (show) {
							dependantControl.show();
						}
						else {
							dependantControl.hide();
						}
					});
					break;
				case 'checkbox': // TODO: this is legacy and should be checked
					console.log('changed');
					$('#' + dependantControl.data('depends')).change( function() {
						console.log('checkbox changed!');
						dependantControl.toggle(); // FIXME: would be safer to mirror $(this).prop('checked');
						/*
						if ($(this).prop('checked')) {
							dependantControl.show();
						}
						else {
							dependantControl.hide();
						}
						*/
					});
					break;
				case 'checkboxes':
					console.log('checkboxes!');
					$('#' + [dependantControl.data('depends'), dependantControl.data('depends-eq')].join('-')).change( function() {
						console.log('checkbox member changed!');
						if ($(this).prop('checked')) {
							dependantControl.show();
						}
						else {
							dependantControl.hide();
						}
					});
					break;
				default:
			}
		});
	});
});