Frevvo Advanced: Make Form Field Visible Based On Checkbox Selection

Table of Contents

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
1. 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;
}

Multi-Checkbox Field Display

// Only copy and use this rule for checkbox fields!
var found_opt1 = false;
var found_opt2 = false;

for (var i = 0; i < checkbox.value.length; i++) {
    // Set which selection in the checkboxes will
    // show/hide the field.
    if (checkbox[i].value === 'Option_1') {
        found_opt1 = true;
    } else if (checkbox[i].value === 'Option_2') {
        found_opt2 = true;
    }
}
if (found_opt1 === true) {
    // Change the part before the period on each of the following
    // to the field you want to show/hide based on checkbox
    // selection.
    section1.visible = true;
    section1.required = true;
} else {
    section1.visible = false;
    section1.required = false;
}
if (found_opt2 === true) {
    // Change the part before the period on each of the following
    // to the field you want to show/hide based on checkbox
    // selection.
    section2.visible = true;
    section2.required = true;
} else {
    section2.visible = false;
    section2.required = false;
}

Pasted Rule Code Image

In the pasted code, modify the following:
1. Change where it says "cbx_color" (lines 3, 6) to the Name value of your checkbox control
2. Change where it says "txt_othercolor" (lines 15, 16, 18, 19) to the Name value of your field you want to make visible
3. Change where it says "'Other'" (line 6) to the value of the checkbox option you want to be checked to make the field visible
  1. 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