Формы и поля

API позволяет взаимодействовать с формами на странице.

💡

API РАБОТАЕТ ТОЛЬКО С НОВЫМИ ФОРМАМИ Отличить «новые» от «старых» просто — если поле формы можно перетащить за ее пределы, это новая форма, и API с ней будет работать правильно.

Содержание

Изменение полей в before-submit Добавление Удаление Изменение Изменение значений полей прямо на странице Пересчет калькулятора

Изменение полей в `before-submit`

Любые изменения в списке полей можно внести прямо перед отправкой формы. Для этого есть событие before-submit класса Form.

Это событие срабатывает после того, как посетитель нажал кнопку «Отправить», но до момента, когда данные формы отправляются на сервер.

При этом реальные поля на странице не будут изменены. То есть изменения полей в событии не затрагивает отображение формы на странице.

Добавление

Допустим, мы хотим добавить к определенной форме с ID my-form 3 поля:

Ширина окна посетителя

Время, которое посетитель провел на сайте

User Agent браузера

var pageOpenTime = Date.now();
cr.api(function (page) {
    page.getComponent('my-form').on('before-submit', function (event) {
        event.fields.push({
            name: 'Ширина экрана',
            value: window.innerWidth,
        }, {
            name: 'Время на сайте (в миллисекундах)',
            value: Date.now() - pageOpenTime,
        }, {
            name: 'User Agent',
            value: navigator.userAgent,
        });
    });
});

Удаление

В том же событии before-submit можно удалять поля.

Допустим, у нас есть поле с названием «Результат», которое является полем-калькулятором, и значение которого нам не нужно в заявке.

Мы находим это поле в списке функцией, и удаляем функцией splice.

cr.api(function (page) {
    page.getComponent('my-form').on('before-submit', function (event) {
        // Находим интересующее нас поле
        var resultField = event.fields.find(function (field) {
            return field.name === 'Результат';
        });

        if (resultField) {
            // Определяем его номер в списке полей
            var resultFieldIndex = event.fields.indexOf(resultField);

            // Удаляем это поле по номеру
            event.fields.splice(resultFieldIndex, 1);
        }
    });
});

event.fields — это обычный массив, при работе с которым можно использовать любые функции массивов.

Изменение

Похожим образом мы можем изменить значение поля. Сначала мы находим в списке полей нужный объект, затем меняем его.

Абстрактный пример — замена «+7» в номерах телефонов на «8»:

cr.api(function (page) {
    page.getComponent('my-form').on('before-submit', function (event) {
        // Находим интересующее нас поле
        var phoneField = event.fields.find(function (field) {
            return field.name === 'Номер телефона';
        });

        if (phoneField) {
            phoneField.value = phoneField.value.replace('+7', '8');
        }
    });
});

TODO: before-form-submit

Изменение значений полей прямо на странице

Возможно менять значения полей прямо на странице.

TODO: Field.setValue

Пересчет калькулятора

TODO: Form.recalculate

Все свойства, методы и события форм и полей смотрите в описании классов Form и Field.