Frevvo Advanced: Make Form Field Visible Based On Checkbox Selection
Overview
There may be some situations in which we want a certain field to only show when a certain checkbox is selected within a form, then disappear if unchecked. Some field properties are modified and a rule is put in place to achieve this.
Process
- Add the checkbox control with the desired options
- Add any additional fields that will be dependent on the checkbox selection(s) (will only show when a specific checkbox is checked)
- In the field properties section for each of the fields that will be shown/hidden based on selection, uncheck the Visible option
- This will make gray out the area around the field in the editor, and make it hidden on the actual form
- This will make gray out the area around the field in the editor, and make it hidden on the actual form
- All form designer controls have been placed and adjusted, now to move onto the form rules
- Select Rules from the toolbar on the top
- Create a new rule by selecting the red icon next to the "Create New Rule" text
- When selected, a new rule will appear below. Select the pencil icon () next to the new rule to edit it.
- Modify the rule Name and Description fields to convey it's function
- Select the Rule Code tab below the Name and Description fields
You will be prompted to enable editing, select the Edit Code button on the right to continue
Paste the following code in the rule code text area:
// Only copy and use this rule for checkbox fields! var found = false; for (var i = 0; i < cbx_color.value.length; i++) { // Set which selection in the checkboxes will // show/hide the field. if (cbx_color[i].value === 'Other') { found = true; break; } } if (found === true) { // Change the part before the period on each of the following // to the field you want to show/hide based on checkbox // selection. txt_othercolor.visible = true; txt_othercolor.required = true; } else { txt_othercolor.visible = false; txt_othercolor.required = false; }
In the pasted code, modify the following:
Change where it says "cbx_color" (lines 3, 6) to the Name value of your checkbox control
- Change where it says "txt_othercolor" (lines 15, 16, 18, 19) to the Name value of your field you want to make visible
- Change where it says "'Other'" (line 6) to the value of the checkbox option you want to be checked to make the field visible
When you added the checkbox control, you should've modified the values available as well. The values are displayed in a "Option=Name" format, each on it's own line. Make sure you change where it says "'Other'" to the checkbox's "Option" property and not it's name! Also be sure to include the single quotes.
If you forget what any of the parameters or names were, you can expand each item in the Form Outline to get a view of what exists!
- Select the Save Icon () from the top-right
- Test the form by selecting the designated checkbox that makes the other control appear