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 as a user-friendly interface.

You can watch a tutorial on YouTube about the conditional system.

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 three points from the left, right, and topsides as you can see above in the picture. Left and right points for chaining with another element. The top point is for deleting this 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.

How to create a condition

For creating the condition(s), it is enough to click the circle button in the chain between elements. You can create single or many conditions for one connection. Moreover, you can connect more than two elements shown below:

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

  • Condition

  • Value

  • Action

Actually, you can see the fourth field (Value) when you select Set or Set and disable options.

In Condition, there 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 drop-down menu. For the Dropdown menu, we can never say 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.

Sample 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.