Conditional Fields Not Working

Hi,

To enable integration of Webba and CF7 conditional fields, please add the following JavaScript in your website:

function wpcf7cf_update_hidden_fields($form) {
	
        $hidden_group_fields = $form.find('[name="_wpcf7cf_hidden_group_fields"]');
        $hidden_groups = $form.find('[name="_wpcf7cf_hidden_groups"]');
        $visible_groups = $form.find('[name="_wpcf7cf_visible_groups"]');
        $repeaters = $form.find('[name="_wpcf7cf_repeaters"]');

        var hidden_fields = [];
        var hidden_groups = [];
        var visible_groups = [];

        $form.find('[data-class="wpcf7cf_group"]').each(function () {
            var $this = jQuery(this);
            if ($this.hasClass('wpcf7cf-hidden')) {
                hidden_groups.push($this.attr('id'));
                $this.find('input,select,textarea').each(function () {
                    hidden_fields.push(jQuery(this).attr('name'));
                });
            } else {
                visible_groups.push($this.attr('id'));
            }
        });

        $hidden_group_fields.val(JSON.stringify(hidden_fields));
        $hidden_groups.val(JSON.stringify(hidden_groups));
        $visible_groups.val(JSON.stringify(visible_groups));

        return true;
}

function wbk_init_conditional_fields(){
  
	var acInputs = document.getElementsByClassName("wpcf7-autocomplete");
	for (var i = 0; i < acInputs.length; i++) {
		var autocomplete = new google.maps.places.Autocomplete(acInputs[i]);
		autocomplete.inputId = acInputs[i].id;
		google.maps.event.addListener(autocomplete, 'place_changed', function () {
		});
	}
  
   var timeout;
   var i=0;
   var options = [];
   jQuery('.wpcf7').each(function(){
        var $this = jQuery(this);
        var options_element = $this.find('input[name="_wpcf7cf_options"]').eq(0);
        if (options_element.length) {
            var value = options_element.val();
            if (value) {
                form_options = JSON.parse(value);
                form_options.unit_tag = $this.attr('id');
                options.push(form_options);
            }
        }
    });
    var show_animation = { "height": "show", "marginTop": "show", "marginBottom": "show", "paddingTop": "show", "paddingBottom": "show" };
    var hide_animation = { "height": "hide", "marginTop": "hide", "marginBottom": "hide", "paddingTop": "hide",  "paddingBottom": "hide" };
          function display_fields(unit_tag, wpcf7cf_conditions, wpcf7cf_settings) {
            var cf7signature_resized = 0; 
            $current_form = jQuery('#'+unit_tag);

            //for compatibility with contact-form-7-signature-addon
            if (cf7signature_resized == 0 && typeof signatures !== 'undefined' && signatures.constructor === Array && signatures.length > 0 ) {
                for (var i = 0; i < signatures.length; i++) {
                    if (signatures[i].canvas.width == 0) {

                        jQuery(".wpcf7-form-control-signature-body>canvas").eq(i).attr('width', jQuery(".wpcf7-form-control-signature-wrap").width());
                        jQuery(".wpcf7-form-control-signature-body>canvas").eq(i).attr('height', jQuery(".wpcf7-form-control-signature-wrap").height());

                        cf7signature_resized = 1;
                    }
                }
            }

            jQuery("#"+unit_tag+" [data-class='wpcf7cf_group']").addClass('wpcf7cf-hidden');

            for (var i=0; i < wpcf7cf_conditions.length; i++) {

                var condition = wpcf7cf_conditions[i];

                // compatibility with conditional forms created with older versions of the plugin ( < 2.0 )
                if (!('and_rules' in condition)) {
                    condition.and_rules = [{'if_field':condition.if_field,'if_value':condition.if_value,'operator':condition.operator}];
                }

                var show_group = true;

                for (var and_rule_i = 0; and_rule_i < condition.and_rules.length; and_rule_i++) {

                    var condition_ok = false;

                    var condition_and_rule = condition.and_rules[and_rule_i];

                    var regex_patt = new RegExp(condition_and_rule.if_value,'i');

                    $field = jQuery('#'+unit_tag+' [name="'+condition_and_rule.if_field+'"]').length ? jQuery('#'+unit_tag+' [name="'+condition_and_rule.if_field+'"]') : $('#'+unit_tag+' [name="'+condition_and_rule.if_field+'[]"]');

                    if ($field.length == 1) {

                        // single field (tested with text field, single checkbox, select with single value (dropdown), select with multiple values)

                        if ($field.is('select')) {

                            if(condition_and_rule.operator == 'not equals') {
                                condition_ok = true;
                            }

                            $field.find('option:selected').each(function () {
                                var $option = jQuery(this);
                                if (
                                    condition_and_rule.operator == 'equals' && $option.val() == condition_and_rule.if_value ||
                                    condition_and_rule.operator == 'equals (regex)' && regex_patt.test($option.val())
                                ) {
                                    condition_ok = true;
                                } else if (
                                    condition_and_rule.operator == 'not equals' && $option.val() == condition_and_rule.if_value ||
                                    condition_and_rule.operator == 'not equals (regex)' && !regex_patt.test($option.val())
                                ) {
                                    condition_ok = false;
                                }
                            });

                            show_group = show_group && condition_ok;

                            continue;
                        }

                        if ($field.attr('type') == 'checkbox') {
                            if (
                                condition_and_rule.operator == 'equals'             && $field.is(':checked')  && $field.val() == condition_and_rule.if_value ||
                                condition_and_rule.operator == 'not equals'         && !$field.is(':checked')                                       ||
                                condition_and_rule.operator == 'is empty'           && !$field.is(':checked')                                       ||
                                condition_and_rule.operator == 'not empty'          && $field.is(':checked')                                        ||
                                condition_and_rule.operator == '>'                  && $field.is(':checked')  && $field.val() > condition_and_rule.if_value  ||
                                condition_and_rule.operator == '<'                  && $field.is(':checked')  && $field.val() < condition_and_rule.if_value  ||
                                condition_and_rule.operator == '>='                 && $field.is(':checked')  && $field.val() >= condition_and_rule.if_value ||
                                condition_and_rule.operator == '<='                 && $field.is(':checked')  && $field.val() <= condition_and_rule.if_value ||
                                condition_and_rule.operator == 'equals (regex)'     && $field.is(':checked')  && regex_patt.test($field.val())      ||
                                condition_and_rule.operator == 'not equals (regex)' && !$field.is(':checked')
                            ) {
                                condition_ok = true;
                            }
                        } else if (
                            ( condition_and_rule.operator == 'equals'             && $field.val() == condition_and_rule.if_value ) ||
                            ( condition_and_rule.operator == 'not equals'         && $field.val() != condition_and_rule.if_value ) ||
                            ( condition_and_rule.operator == 'equals (regex)'     && regex_patt.test($field.val())      ) ||
                            ( condition_and_rule.operator == 'not equals (regex)' && !regex_patt.test($field.val())     ) ||
                            ( condition_and_rule.operator == '>'                  && $field.val() > condition_and_rule.if_value  ) ||
                            ( condition_and_rule.operator == '<'                  && $field.val() < condition_and_rule.if_value  ) ||
                            ( condition_and_rule.operator == '>='                 && $field.val() >= condition_and_rule.if_value ) ||
                            ( condition_and_rule.operator == '<='                 && $field.val() <= condition_and_rule.if_value ) ||
                            ( condition_and_rule.operator == 'is empty'           && $field.val() == ''                 ) ||
                            ( condition_and_rule.operator == 'not empty'          && $field.val() != ''                 )
                        ) {
                            condition_ok = true;
                        }

                    } else if ($field.length > 1) {

                        // multiple fields (tested with checkboxes, exclusive checkboxes, dropdown with multiple values)

                        var all_values = [];
                        var checked_values = [];
                        $field.each(function() {
                            all_values.push(jQuery(this).val());
                            if(jQuery(this).is(':checked')) {
                                checked_values.push(jQuery(this).val());
                            }
                        });

                        var checked_value_index = $.inArray(condition_and_rule.if_value, checked_values);
                        var value_index = $.inArray(condition_and_rule.if_value, all_values);

                        if (
                            ( condition_and_rule.operator == 'is empty'   && checked_values.length == 0 ) ||
                            ( condition_and_rule.operator == 'not empty'  && checked_values.length > 0  )
                        ) {
                            condition_ok = true;
                        }

                        for(var ind=0; ind<checked_values.length; ind++) {
                            if (
                                ( condition_and_rule.operator == 'equals' &&              checked_values[ind] == condition_and_rule.if_value ) ||
                                ( condition_and_rule.operator == 'not equals' &&          checked_values[ind] != condition_and_rule.if_value ) ||
                                ( condition_and_rule.operator == 'equals (regex)' &&      regex_patt.test(checked_values[ind])      ) ||
                                ( condition_and_rule.operator == 'not equals (regex)' &&  !regex_patt.test(checked_values[ind])     ) ||
                                ( condition_and_rule.operator == '>' &&                   checked_values[ind] > condition_and_rule.if_value  ) ||
                                ( condition_and_rule.operator == '<' &&                   checked_values[ind] < condition_and_rule.if_value  ) ||
                                ( condition_and_rule.operator == '>=' &&                  checked_values[ind] >= condition_and_rule.if_value ) ||
                                ( condition_and_rule.operator == '<=' &&                  checked_values[ind] <= condition_and_rule.if_value )
                            ) {
                                condition_ok = true;
                            }
                        }
                    }
                    show_group = show_group && condition_ok;
                }
                if (show_group) {
                    jQuery('#'+unit_tag+' #'+condition.then_field).removeClass('wpcf7cf-hidden');
                }
            }

            var animation_intime = parseInt(wpcf7cf_settings.animation_intime);
            var animation_outtime = parseInt(wpcf7cf_settings.animation_outtime);

            if (wpcf7cf_settings.animation == 'no') {
                animation_intime = 0;
                animation_outtime = 0;
            }

            jQuery("#" + unit_tag + " [data-class='wpcf7cf_group']").each(function (index) {
                $group = jQuery(this);
                if ($group.is(':animated')) $group.finish(); // stop any current animations on the group
                if ($group.css('display') == 'none' && !$group.hasClass('wpcf7cf-hidden')) {
                    if ($group.prop('tagName') == 'SPAN') {
                        $group.show().trigger('wpcf7cf_show_group');
                    } else {
                        $group.animate(show_animation, animation_intime).trigger('wpcf7cf_show_group'); // show
                    }
                } else if ($group.css('display') != 'none' && $group.hasClass('wpcf7cf-hidden')) {
                    console.log($group.prop('tagName'));
                    if ($group.prop('tagName') == 'SPAN') {
                        $group.hide().trigger('wpcf7cf_show_group');
                    } else {
                        $group.animate(hide_animation, animation_outtime).trigger('wpcf7cf_hide_group'); // hide
                    }

                    if ($group.attr('data-clear_on_hide') !== undefined) {
                        jQuery(':input', $group)
                            .not(':button, :submit, :reset, :hidden')
                            .val('')
                            .prop('checked', false)
                            .prop('selected', false);
                    }
                }
            });

            wpcf7cf_update_hidden_fields($current_form);
        }

        for (var i = 0; i<options.length; i++) {

            var unit_tag = options[i]['unit_tag'];
            var conditions = options[i]['conditions'];
            var settings = options[i]['settings'];

            display_fields(unit_tag, conditions, settings);

            jQuery('#'+unit_tag+' input, #'+unit_tag+' select, #'+unit_tag+' textarea, #'+unit_tag+' button').on('input paste change click',{unit_tag:unit_tag, conditions:conditions, settings:settings}, function(e) {
                clearTimeout(timeout);
                timeout = setTimeout(display_fields, 100, e.data.unit_tag, e.data.conditions, e.data.settings);
            });

            // bring form in initial state if
            jQuery('#'+unit_tag+' form').on('reset', {unit_tag:unit_tag, conditions:conditions, settings:settings}, function(e) {
                setTimeout(display_fields, 200, e.data.unit_tag, e.data.conditions, e.data.settings);
            });
        }

        // Also add hidden fields in case a form gets submitted without any input:
        jQuery('form.wpcf7-form').each(function(){
            wpcf7cf_update_hidden_fields(jQuery(this));
        });
  		
}

Please, clarify – have you tried your form without Webba? Does conditional fields works if you put the form on separate page?

Yes, right. Sorry. Can you, please, send a screenshot of conditional fields settings to [email protected] ?

Was in spam. We are checking details….

Thanks. The correct custom JavaScript code for the latest version of Conditional fields is:

function wbk_init_conditional_fields(){
jQuery('.wpcf7-form').each(function(){
    wpcf7cf_forms.push(new Wpcf7cfForm(jQuery(this)));
});  		
}