Tips and cases of use for a successful WordPress website with calculated forms.
How to implement equations using fields from different forms inserted on the same page?
The major potential of our product is its calculated fields and equations.
The "Calculated Fields Form" plugin includes many operations for different areas, and accessing the fields from the equations is very easy.
The plugin assigns the fields' names dynamically with the structure fieldname# (Ex. fieldname1, fieldname2, fieldname3, and so on), and use their values from the equations is as simple as enter their names. For example, for summing the values of the number fields fieldname1 and fieldname2, you can insert a calculated field in the form and enter the fieldname1+fieldname2 equation through its "Set equation" attribute, or the alternative equation SUM(fieldname1,fieldname2)
The plugin dynamically replaces the fields' names (Ex. fieldname1) in the equations by their corresponding fields' values. However, the plugin supports some special modifiers to modify this behavior. I will describe the modifiers because I will refer to them later.
The |n modifier tells the plugin you are referring to the field's name and should not be replaced by its value. Ex. getField(fieldname1|n).val() (The previous code uses the getField operation to get the object representation of the fieldname1 field and obtain its value via its "val" method. I'll refer to the "getField" operation later.)
The |r modifier tells the plugin you want to use the field's raw value. The plugin preprocesses the fields' values to extract valid numbers to use in mathematical operations. For example, assuming your form includes the currency field fieldname1, and its value is "$10.5 USD", including the fieldname1 in the equation, the plugin would replace it with the 10.5 number. However, if you include the field's name in the equation with the |r modifier, fieldname1|r would be replaced by the text "$10.5 USD".
The |v modifier is supported only by DropDown, Radio Buttons, and Checkbox fields (including their DS variants). These fields contain choices, and each choice is composed of a value and text. Also, they include the "Value to submit" attribute. If you enter the field name in the equation, Ex. fieldname1, the plugin will replace it with the value (or values) of the choices selected. The |v modifier tells the plugin you want to use the information to submit (the choice value or text). Ex. fieldname1|v
When you implement an equation, the plugin assumes that the field names are references to fields in the form containing the calculated field. So, how to proceed if you need to access the values of fields in other forms on the same page?
The getField operation comes to your rescue. The getField operation, mentioned above, accepts two parameters, the field name and the form object, or form selector, that contains the field. By using the getField operation in your equation, it is possible to access the values of fields from different forms on the page.
Now, the question is, how to identify other forms on the page?
Each form has a shortcode associated with it. Ex. [CP_CALCULATED_FIELDS id="1"] (Form Insertion). The shortcode accepts other attributes, such as the "class" attribute. This attribute allows you to assign class names to the form tag. Ex. [CP_CALCULATED_FIELDS id="1" class="first-form"]
The plugin allows you to assign class names to the forms, even if you insert them visually, by entering class="first-form" through the "Additional attributes" attribute in the block properties:
I know the introduction has been extensive, but each feature described above would be used in the following use case. It is a simple use case but illustrates how to implement equations that include other form fields.
Assuming your page includes two forms, form "A" and "B". Form "A" has assigned the "first-form" class name, and you want to use its fieldname1 field in an equation of form "B". The equation in this use case is simple, duplicate the value of the fieldname1 field.
The equation implementation would be:
getField(fieldname1|n, '.first-form').val()*2
The equation calls the getField operation by passing fieldname1|n as the first parameter, with the |n modifier to refer to the field's name, and the class name assigned to the form "A" as the second parameter (the form selector). The getField operation returns an object representation of the fieldname1 field, and the val method returns its value.
