Калькуляторы или формы-калькуляторы можно сделать более умными при помощи условий в формуле или условных полей, которые позволяют отобразить то или иное поле только после выбора в предыдущем определенного значения. Для создания условных полей потребуются базовые знания операторов 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. В редакторе скрытые поля будут отображаться полупрозрачными, в предпросмотре или на опубликованной странице они будут скрыты полностью и начнут отображаться только по мере ввода данных. По этому, чтобы точно проверить результат опубликуем страницу.
Нажмите на ссылку, чтобы посмотреть калькулятор в работе на опубликованной странице.