Setting up conditional logic in 1C-Bitrix forms

Conditional Logic Setup in 1C-Bitrix Forms

A feedback form with 15 fields shows all 15 at once. Five are only relevant for legal entities, three only when a specific request type is selected. User sees extra fields and leaves. Conditional logic hides and shows fields based on other field values.

Bitrix Web Forms and Their Structure

The form module stores forms in b_form, fields in b_form_field. Each field has type (SID): text, select, radio, checkbox, textarea, etc. Standard form module doesn't support conditional logic out of the box — it's added via JavaScript in bitrix:form.result.new component template.

Component is located in /bitrix/components/bitrix/form.result.new/. Template copied to /bitrix/templates/[template]/components/bitrix/form.result.new/[template_name]/template.php.

In template, each form field renders with id attribute generated by mask field_[SID], where SID is field system ID from b_form_field. This is the anchor for JavaScript logic.

Implementation via data-attributes

Conditions described via data-* attributes on field containers. Approach keeps configuration next to markup:

<!-- Client type field (radio: individual / company) -->
<div class="form-row" id="row_CLIENT_TYPE">
    <!-- field render -->
</div>

<!-- Tax ID field — show only if CLIENT_TYPE = 'company' -->
<div class="form-row"
     id="row_INN"
     data-condition-field="CLIENT_TYPE"
     data-condition-value="company"
     style="display:none">
    <!-- field render -->
</div>

JavaScript handler:

document.addEventListener('DOMContentLoaded', function () {
    function applyConditions() {
        document.querySelectorAll('[data-condition-field]').forEach(function (row) {
            var fieldSid   = row.dataset.conditionField;
            var reqValue   = row.dataset.conditionValue;
            var controller = document.querySelector('[name="form_field_' + fieldSid + '"]');
            if (!controller) return;

            var currentValue = controller.type === 'radio'
                ? (document.querySelector('[name="form_field_' + fieldSid + '"]:checked') || {}).value
                : controller.value;

            row.style.display = (currentValue === reqValue) ? '' : 'none';

            // Reset hidden field value
            if (row.style.display === 'none') {
                row.querySelectorAll('input, select, textarea').forEach(function (el) {
                    el.value = '';
                    if (el.type === 'checkbox' || el.type === 'radio') el.checked = false;
                });
            }
        });
    }

    // Attach to all controlled fields
    document.querySelectorAll('[data-condition-field]').forEach(function (row) {
        var fieldSid   = row.dataset.conditionField;
        var controller = document.querySelectorAll('[name="form_field_' + fieldSid + '"]');
        controller.forEach(function (el) {
            el.addEventListener('change', applyConditions);
        });
    });

    applyConditions(); // Apply on load
});

Server Validation of Hidden Fields

Important: hidden field shouldn't be required on server if hidden by condition. Standard form module checks field requirement by REQUIRED flag in b_form_field without considering conditions.

Workaround via OnBeforeResultAdd event handler:

AddEventHandler('form', 'OnBeforeResultAdd', function($formId, &$arFields) {
    // If client type is not company — remove tax ID from required
    if (($arFields['form_field_CLIENT_TYPE'] ?? '') !== 'company') {
        unset($arFields['form_field_INN']);
    }
});

Multiple Conditions

For fields with multiple conditions (show if A = x AND B = y) data-attributes expand:

data-condition-rules='[{"field":"CLIENT_TYPE","value":"company"},{"field":"REQUEST_TYPE","value":"credit"}]'

JavaScript reads JSON.parse(row.dataset.conditionRules) and checks all conditions via Array.every(). Covers most scenarios without external library.