Калькуляторы или формы-калькуляторы можно сделать более умными при помощи условий в формуле или условных полей, которые позволяют отобразить то или иное поле только после выбора в предыдущем определенного значения.
Для создания условных полей потребуются базовые знания операторов if, else, операторов сравнения и логическими операторами.
Пример одного из таких калькуляторов, снятый одним из наших пользователей, можно просмотреть в публикации и на видео:
Содержание
В инструкции "Создание калькулятора или формы-калькулятора" рассказано о создании калькуляторов с нуля. В этой мы добавим к калькулятору ”Расчет суточной нормы потребления калорий” возможность расчета мужской и женской нормы потребления калорий используя условия в формуле.
1. Для выбора пола добавим одно поле "Варианты", переименуем его в "Ваш пол" и в качестве вариантов укажем "Мужской" и "Женский".
2. Добавим к этому полю переменную и значение переменной при выборе того или иного варианта.
3. Расчет суточной нормы потребления калорий для мужчин и женщин отличается лишь формулой расчета, потому произведем оставшиеся изменения только в поле ”Калькулятор”.
В поле ”Формула” применим операторы 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. Добавим в форму над полем ”Калькулятор” поле ”Варианты”, изменим название поля на ”Как рассчитывать норму?” и добавим необходимые варианты выбора.
2. В настройках этого же поля укажем переменную и значения переменной.
Чтобы выбранный вариант по умолчанию оставался на ”Поддержание веса”, выберем его прямо в редакторе.
3. Теперь изменим формулу в поле "Калькулятор" так, чтобы она поддерживала новые параметры.
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
}
Нажмите на ссылку, чтобы посмотреть калькулятор в работе на опубликованной странице
Можем сделать так, чтобы в форме отображались сразу все три значения ("Набрать вес", "Поддерживать вес", "Сбросить вес") одновременно:
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 точно не пустая, то есть содержит любые данные, тогда поле отобразится при любом значении в переменной кроме пустого значения.
Здесь написано: переменная floor точно пустая, то есть не содержит никаких данных или равна нулю, тогда поле отобразится только, если поле пустое.
Здесь написано: переменная floor точно не пустая, тогда поле отобразится при любом значении переменной, кроме пустой переменной.
Здесь написано: переменная floor равна единице, тогда поле отобразится, только если значение равно единице и не отобразится при любом другом значении.
Здесь написано: переменная floor не равна единице, тогда поле, где указано данное условие отобразилось бы при любом значение в переменной floor кроме единицы, даже если бы переменная была пустой. Если значение переменной становится единица - поле скрывается.
Здесь написано: переменная 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. В редакторе скрытые поля будут отображаться полупрозрачными, в предпросмотре или на опубликованной странице они будут скрыты полностью и начнут отображаться только по мере ввода данных. По этому, чтобы точно проверить результат опубликуем страницу.
Нажмите на ссылку, чтобы посмотреть калькулятор в работе на опубликованной странице.
ТЕХНИЧЕСКАЯ ПОДДЕРЖКА
Напишите нам. на связи 24/7. Среднее время ожидания ответа: 10-15 минут. Также вы можете вступить в наш Телеграм-чат, где собралось много специалистов и пользователей.
Агенты ответят через 10 минут