Conditional System


The usage of the conditional system is important when you have too many logical operations. It is really easy to use this feature due to a user-friendly interface.

After choosing HTML elements created in a calculator, only those elements will be listed in your condition area. Since this feature is dynamic, you cannot put conditions relative to an element that does not exist.

It is important to set different values in the options of Radio Button, Drop Down, Toggle button, and Checkbox elements so that the conditional system feature works in a correct manner.

You have to click just once on an element that you need and it will be shown in the working area.

The chosen element has 8 connection points for chaining with other elements. The top right point is for deleting this element.

To create a connection, you need to drag a line from the selected element to the unselected one. The arrow indicates that the right element depends on the left element.

It is important which element you will connect first while chaining. The element that you are taking its left or right points is independent and the action for that condition will be applied to independent elements. The condition will be applied to the dependent element.

It is possible to create multiple connections and conditions between different elements.

How to Create a Condition

To create the condition(s), it is enough to click on the circle button in the chain between elements.

You can create single or many conditions for one connection:

After pressing the Add condition button, there will be appeared in three fields:

  • Condition

  • Value

  • Action

The fourth field will appear if you select the Set or Set and disable option in the Action field.

In Condition, there are four options: is equal to, is inferior to (less than), is superior to (greater than), is different than.

In the Action field, you can find hide, show, hide (leave in total), unset, set value, set value, and disable operators:

Make sure that you are using logically correct conditions and choosing proper elements for them.

The Element that can take string values cannot be put into a condition like elements that include quantity or number. For example, we have fruit types (orange, apple, strawberry) in the Dropdown menu. For the Dropdown menu, we can never set a condition "if the fruit type is less than 50, hide the radio button".

When you set the condition, you can save the changes that will be applied to the calculator.

Condition Creating Example

Let's take an example of making the conditional system more clear.

Below you can see the initial view of the Loan form sample calculator without any conditions.

For example, I want to write a condition for the Annual Interest Rate depending on the Loan Amount. So, I have to link from Loan Amount to the Annual Interest Rate.

For the condition, I will say that if the loan amount is greater than 15 000, set the annual interest rate to 10. if the loan amount is less than 5 000, hide the annual interest rate element. Below you can see how it is done.

Now it is time to see the result. The first picture is for the first condition. When the loan amount is 16 000, the annual interest rate should be set to 10.

The second picture is for the second condition. When the loan amount is 5 000, the annual interest rate should be hidden.