Калькуляторы или формы-калькуляторы можно сделать более умными при помощи условий в формуле или условных полей, которые позволяют отобразить то или иное поле только после выбора в предыдущем определенного значения.
Для создания условных полей потребуются базовые знания операторов if, else, операторов сравнения и логическими операторами.
Пример одного из таких калькуляторов, снятый одним из наших пользователей, можно просмотреть в публикации и на видео выше ⬆️
Как добавить условия в формулу
В инструкции "Создание калькулятора или формы-калькулятора" рассказано о создании калькуляторов с нуля. В этой мы добавим к калькулятору ”Расчет суточной нормы потребления калорий” возможность расчета мужской и женской нормы потребления калорий используя условия в формуле.
1. Для выбора пола добавим одно поле "Варианты", переименуем его в "Ваш пол" и в качестве вариантов укажем "Мужской" и "Женский".
2. Добавим к этому полю переменную и значение переменной при выборе того или иного варианта.
- Переменная - floor;
- Значение переменной для варианта ”Мужчина” - 0;
- Значение переменной для варианта ”Женщина” - 1.
3. Расчет суточной нормы потребления калорий для мужчин и женщин отличается лишь формулой расчета, потому произведем оставшиеся изменения только в поле ”Калькулятор”.
- Формула для мужчин: (weight * 9.99 + growth * 6.25 - age * 4.92 + 5) * activity
- Формула для женщин: (weight * 9.99 + growth * 6.25 - age * 4.92 - 161) * activity
В поле ”Формула” применим операторы if и else, чтобы получилось так:
if (floor == 0) {
(weight * 9.99 + growth * 6.25 - age * 4.92 + 5) * activity
} else {
(weight * 9.99 + growth * 6.25 - age * 4.92 - 161) * activity
}Простыми словами мы указали следующее:
(if) Если переменная floor равна значению 0, тогда выполним формулу для мужчин.(else) Иначе выполним формулу для женщин.
Нажмите на ссылку, чтобы посмотреть калькулятор в работе на опубликованной странице
Дополнительные варианты настройки
Созданный вариант калькулятора на текущий момент рассчитывает только норму потребления калорий, но норма может меняться в зависимости от желания набрать немного веса или сбросить его. Чтобы добавить и этот расчет, выполним следующие действия.
Вариант 1
Можем сделать так, чтобы в форме было поле с выбором ”Набрать весь”, ”Поддерживать вес”, ”Сбросить вес” и в зависимости от выбранного варианта менялся результат расчета:
1. Добавим в форму над полем ”Калькулятор” поле ”Варианты”, изменим название поля на ”Как рассчитывать норму?” и добавим необходимые варианты выбора.
2. В настройках этого же поля укажем переменную и значения переменной.
- Переменная - condition;
- Для варианта ”Набрать вес” значение - 1.1 (плюс 10%);
- Для варианта ”Поддерживать вес” значение - 1 (100%);
- Для варианта ”Сбросить вес” значение - 0.9 (минус 10%).
Чтобы выбранный вариант по умолчанию оставался на ”Поддержание веса”, выберем его прямо в редакторе.
3. Теперь изменим формулу в поле "Калькулятор" так, чтобы она поддерживала новые параметры.
- Формула для мужчин: (weight * 9.99 + growth * 6.25 - age * 4.92 + 5) * activity * condition
- Формула для женщин: (weight * 9.99 + growth * 6.25 - age * 4.92 - 161) * activity * condition
4. Используя условные операторы if и else добавим новую формулу в поле.
if (floor == 0) {
(weight * 9.99 + growth * 6.25 - age * 4.92 + 5) * activity * condition
} else {
(weight * 9.99 + growth * 6.25 - age * 4.92 - 161) * activity * condition
}
Нажмите на ссылку, чтобы посмотреть калькулятор в работе на опубликованной странице
Вариант 2
Можем сделать так, чтобы в форме отображались сразу все три значения ("Набрать вес", "Поддерживать вес", "Сбросить вес") одновременно:
1. Удалим поле с текстом "Как рассчитывать норму?" И добавим два новых поля "Калькулятор" продублировав уже добавленное поле.
2. Переименуем поля дубликат поля "Калькулятор".
- Для первого поля название - "Суточная норма потребления калорий для набора веса";
- Для второго поля название - "Суточная норма потребления калорий для поддержания веса"
- Для третьего поля название - "Суточная норма потребления калорий для сброса веса".
3. Теперь добавим в поля "Калькулятор" новые формулы.
- Для первого поля:
if (floor == 0) {
(weight * 9.99 + growth * 6.25 - age * 4.92 + 5) * activity * 1.1
} else {
(weight * 9.99 + growth * 6.25 - age * 4.92 - 161) * activity * 1.1
}- Для второго поля:
if (floor == 0) {
(weight * 9.99 + growth * 6.25 - age * 4.92 + 5) * activity
} else {
(weight * 9.99 + growth * 6.25 - age * 4.92 - 161) * activity
}- Для третьего поля:
if (floor == 0) {
(weight * 9.99 + growth * 6.25 - age * 4.92 + 5) * activity * 0.9
} else {
(weight * 9.99 + growth * 6.25 - age * 4.92 - 161) * activity * 0.9
}
Нажмите на ссылку, чтобы посмотреть калькулятор в работе на опубликованной странице
Как настроить условные поля
Можем сделать так, чтобы в форме отображалось сначала только одно поле и по мере ввода данных появлялись новые:
1. Чтобы появление полей по мере ввода работало так, как нам нужно, следует сделать все поля незаполненными, то есть удалить все введенные значения по умолчанию.
Видео: Убираем в полях выбранные по умолчанию значения
2. Также для работы условий, которые мы укажем в следующем шаге нужно сделать так, чтобы в полях, где есть варианты выбора, значения вариантов не были нулевыми. То есть 0 изменить на цифру 1, следующую цифру 1 на 2 и так далее.
3. Ко всем последующим полям, кроме первого добавим условия.
- Для поля "Рост (в сантиметрах)" условие - floor;
- Для поля "Вес (в килограммах)" условие - growth;
- Для поля "Возраст" условие - weight;
- Для поля "Степень активности" - age;
- Для поля "Как расчитывать норму?" условие - activity;
- Для поля "Суточная норма потребления калорий" условие - condition.
Видео: Указываем условия показа полей по мере ввода значений
В полях "Условие" мы указали только имена переменных, почему?
Переменная может быть пустой или с каким-то данными. Пустые значения это, когда в переменной указан ноль или не указаны вообще никакие данные:
- Пустая переменная - var test;
- Пустая переменная - var test = 0;
- Переменная с данными - var test = любое значение, кроме нуля;
Поле "Условие" скрывает поле в форме, если переменная пустая и показывает его, когда переменная содержит данные. Указать условие в поле мы могли бы и так:
- floor;
Здесь написано: переменная floor точно не пустая, то есть содержит любые данные, тогда поле отобразится при любом значении в переменной кроме пустого значения.
- !floor;
Здесь написано: переменная floor точно пустая, то есть не содержит никаких данных или равна нулю, тогда поле отобразится только, если поле пустое.
- floor != "";
Здесь написано: переменная floor точно не пустая, тогда поле отобразится при любом значении переменной, кроме пустой переменной.
- floor == 1;
Здесь написано: переменная floor равна единице, тогда поле отобразится, только если значение равно единице и не отобразится при любом другом значении.
- floor != 1;
Здесь написано: переменная floor не равна единице, тогда поле, где указано данное условие отобразилось бы при любом значение в переменной floor кроме единицы, даже если бы переменная была пустой. Если значение переменной становится единица - поле скрывается.
- floor == 1 || floor == 2;
Здесь написано: переменная floor равна единице или переменная floor равна двойке, тогда поле отобразится только, если переменная содержит первое или второе значение.
Все эти варианты возможны благодаря операторам сравнения и логическим операторам.
4. Заменим в поле "Суточная норма потребления калорий" условие с ”floor == 0” на ”floor == 1”, так как во втором шаге мы изменили значение переменной floor с 0 и 1 на 1 и 2.
if (floor == 1) {
(weight * 9.99 + growth * 6.25 - age * 4.92 + 5) * activity * condition
} else {
(weight * 9.99 + growth * 6.25 - age * 4.92 - 161) * activity * condition
}
5. В редакторе скрытые поля будут отображаться полупрозрачными, в предпросмотре или на опубликованной странице они будут скрыты полностью и начнут отображаться только по мере ввода данных. По этому, чтобы точно проверить результат опубликуем страницу.
Нажмите на ссылку, чтобы посмотреть калькулятор в работе на опубликованной странице.
