Form Conditions and Calculations
Form conditions make it possible to show/hide/enable/disable other objects based on the value or selection of a form input field.
For example, you can disable the form's submit button until the user checks a box. Multiple conditions can be added to an object.
It is also possible to do calculations in form fields. Calculations can be used to calculate a value based on values or selections of other input fields. For example, to calculate the total price of an item in a web shop based on the selected options. Conditions/calculations options are available for Editbox, TextArea, Combobox, Checkbox and Radio Button. For a description of all the available options please see the help.
In this tutorial we will show you a few examples. A link to the demo project with the examples from this tutorial (and more!) is available at the bottom of this page.
Example 1: Enable the submit button with a Checkbox
Step 1
Create a form with a checkbox and a submit button. Add a label 'I Agree to the Privacy Policy'.
Make sure the 'Disabled' property of the Submit is checked, so the button cannot be clicked initially.
Form conditions make it possible to show/hide/enable/disable other objects based on the value or selection of a form input field.
For example, you can disable the form's submit button until the user checks a box. Multiple conditions can be added to an object.
It is also possible to do calculations in form fields. Calculations can be used to calculate a value based on values or selections of other input fields. For example, to calculate the total price of an item in a web shop based on the selected options. Conditions/calculations options are available for Editbox, TextArea, Combobox, Checkbox and Radio Button. For a description of all the available options please see the help.
In this tutorial we will show you a few examples. A link to the demo project with the examples from this tutorial (and more!) is available at the bottom of this page.
Example 1: Enable the submit button with a Checkbox
Step 1
Create a form with a checkbox and a submit button. Add a label 'I Agree to the Privacy Policy'.
Make sure the 'Disabled' property of the Submit is checked, so the button cannot be clicked initially.
Step 2
Open the 'Conditions' properties of the checkbox and add two conditions:
Condition: checked
Action: enable
Target: submit (the ID of the submit button).
and
Condition: not checked
Action: disable
Target: submit (the ID of the submit button).
Open the 'Conditions' properties of the checkbox and add two conditions:
Condition: checked
Action: enable
Target: submit (the ID of the submit button).
and
Condition: not checked
Action: disable
Target: submit (the ID of the submit button).
Step 3
Publish or Preview to test the form in the browser.
http://www.quickandeasywebbuilder.com/support/conditions1.html
Publish or Preview to test the form in the browser.
http://www.quickandeasywebbuilder.com/support/conditions1.html
Example 2: Calculate the sum of two input fields
Step 1
Create a form with 3 editboxes: value1, value2 and total
Step 1
Create a form with 3 editboxes: value1, value2 and total
Step 4
Publish or Preview to test the form in the browser.
http://www.quickandeasywebbuilder.com/support/conditions4.html
Download the demo project:
http://www.quickandeasywebbuilder.com/support/formcalculation.zip
Publish or Preview to test the form in the browser.
http://www.quickandeasywebbuilder.com/support/conditions4.html
Download the demo project:
http://www.quickandeasywebbuilder.com/support/formcalculation.zip
Step 2
Open the 'Conditions' properties of the first editbox (value1) and add a condition with the following values:
Condition: change
Action: calculate
Target: total (the ID of the result field)
Expression: Number([value1]) + Number([value2])
Notes:
Open the 'Conditions' properties of the first editbox (value1) and add a condition with the following values:
Condition: change
Action: calculate
Target: total (the ID of the result field)
Expression: Number([value1]) + Number([value2])
Notes:
1. To add the value of an input field in an expression you will need to put its ID between square brackets. QWB will automatically replace this with the necessary code to get the value in the published page.
2. Number is a standard JavaScript function. It gets the numeric value of the input field. If we did not use Number then the string value would be used instead.
3. QWB will automatically monitor all other input fields we use in an expression so there is no need to add the same condition to the other editbox (value2)!
2. Number is a standard JavaScript function. It gets the numeric value of the input field. If we did not use Number then the string value would be used instead.
3. QWB will automatically monitor all other input fields we use in an expression so there is no need to add the same condition to the other editbox (value2)!
Step 3
Publish or Preview to test the form in the browser.
http://www.quickandeasywebbuilder.com/support/conditions2.html
Publish or Preview to test the form in the browser.
http://www.quickandeasywebbuilder.com/support/conditions2.html
Example 3: Products with quantity
Step 1
Create a form with 3 radio buttons, and 2 editboxes: quantity and total.
Make sure all radio button have the same group name: product
Set the values of the radio button to: 10, 50 and 25
Step 1
Create a form with 3 radio buttons, and 2 editboxes: quantity and total.
Make sure all radio button have the same group name: product
Set the values of the radio button to: 10, 50 and 25
Step 2
Open the 'Conditions' properties of the 'quantity' editbox and add a condition with the following values:
Condition: change
Action: calculate
Target: total (the ID of the result field)
Expression: [RadioButton1] * [quantity]
Notes:
Open the 'Conditions' properties of the 'quantity' editbox and add a condition with the following values:
Condition: change
Action: calculate
Target: total (the ID of the result field)
Expression: [RadioButton1] * [quantity]
Notes:
1. Although we have only added the ID of the first radio button, QWB will automatically use the values of all radio buttons with the same group name!
2. QWB will automatically monitor all other input fields we use in an expression so there is no need to add the same condition to the other input fields!
2. QWB will automatically monitor all other input fields we use in an expression so there is no need to add the same condition to the other input fields!
Step 3
Publish or Preview to test the form in the browser.
http://www.quickandeasywebbuilder.com/support/conditions3.html
Publish or Preview to test the form in the browser.
http://www.quickandeasywebbuilder.com/support/conditions3.html
Example 4: Tax and shipping costs
Step 1
Create a form with 2 comboboxes: size, quantity and 3 editboxes: shipping, tax and total.
Step 1
Create a form with 2 comboboxes: size, quantity and 3 editboxes: shipping, tax and total.
Step 2
Open the 'Conditions' properties of the 'quantity' editbox and add two conditions:
Condition: change
Action: calculate
Target: shipping (the ID of the result field)
Expression: '$' + (Number([quantity]) * 5)
and
Condition: change
Action: calculate
Target: tax (the ID of the result field)
Expression: '$' + (0.1 * (Number([size]) * Number([quantity])))
Notes:
Open the 'Conditions' properties of the 'quantity' editbox and add two conditions:
Condition: change
Action: calculate
Target: shipping (the ID of the result field)
Expression: '$' + (Number([quantity]) * 5)
and
Condition: change
Action: calculate
Target: tax (the ID of the result field)
Expression: '$' + (0.1 * (Number([size]) * Number([quantity])))
Notes:
1. The first condition updates the shipping field.In this case the shipping costs per item will be $5.
2. The second condition updates the tax field. In this case the tax is 10% of the item price.
2. The second condition updates the tax field. In this case the tax is 10% of the item price.
Step 3
Open the 'Conditions' properties of the 'total' editbox and add this condition:
Condition: change
Action: calculate
Target: total (the ID of the result field)
Expression: '$' + ((Number([size]) + 5) * Number([quantity]) + 0.1 * (Number([size]) * Number([quantity])))
Note: This condition updates the total field.
Open the 'Conditions' properties of the 'total' editbox and add this condition:
Condition: change
Action: calculate
Target: total (the ID of the result field)
Expression: '$' + ((Number([size]) + 5) * Number([quantity]) + 0.1 * (Number([size]) * Number([quantity])))
Note: This condition updates the total field.
