Set up conditionals for groups of fields

Certain scenarios require that you create a large number of show / hide conditions for your form's fields. This can slow down the website visitor's browser considerably as, for each condition, a new Javascript function will be added to the form's page. This can be avoided using a simple workaround:

To demonstrate this, we have created a very simple form that contains 1 radio group (Yes/No), 4 textboxes and a submit button:

• question - Radio group - Yes / No
• field a - textbox
• field b - textbox
• field c - textbox
• field d - textbox
• submit - submit button

Let's assume that you wish to display both field a and field b if the user selects Yes in the question field, and show field c and field d if the user selects No. Through the default usage of the Conditional Fields feature, you would need to create 4 separate conditions in order for this to work. To reduce the number of conditions (to 2 conditions, in our case), please apply the following:

• In Components >> RSForm!Pro >> Manage Forms >> edit your form >> Properties >> Conditional Fields, click on New and create a condition for field a as in the image below:



• Under the same path, create a condition for field b as in the image below:



• Head to Components >> RSForm!Pro >> Manage Forms >> edit your form >> Properties >> Form Layout and set Auto Generate Layout to No.


• Copy the entire contents of the <div> that encloses field b (make sure to include all placeholders: {field b:caption}, {field b:body}, {field b:validation} and {field b:description}) within the <div> that encloses field a. In doing so, when field a is hidden, field b will be hidden along with it.


• Repeat the same process for field d and, respectively, field c. The end result should look like this:




IMPORTANT !

Not all form layouts use <div> containers to enclose form fields. In the provided example we have used the Responsive CSS3 layout but, depending on the layout selected in the Form Layout tab, the following containers may be used in your scenario: <tr> (Inline and 2 Columns Inline) or <li> (Inline (XHTML) and 2 Lines (XHTML)).



• Remember to click Save or Save & Close when you're done, otherwise the changes will not take effect.

By setting up the form in the manner described above, we have reduced the number of conditions required to hide the fields from 4 to only 2. Note that this example can be applied for any number of fields, and its results can be best noticed on forms with large number of conditions.

Click on the link below to download the example described above. You can add it to your website (or a local installation) through RSForm!Pro's Backup / Restore feature.

Conditional groups of fields example

10 persons found this article helpful.

You Should Also Read