We created a simple list with choice field and four text fields.
Open forms designer and place your fields in the form:
Save the form and open some list item for editing (we need to find the generated identifier for the fields).
You need to save a part of the identifier for each required field (in our case there are 4 fields and choice field)
After collecting all the data, open the Virto Forms Designer and add the JS code to the form.
Save script and save form.
Now you should see:
JS Code:
// Choice Field
var fldSelect = $("[id*='_ChoiceField_ctl00']");
// Fields components
var fld1 = $("[id*='G0_x0020_Field1Field_ctl00']").closest(".component");
var fld2 = $("[id*='G0_x0020_Filed2Field_ctl00']").closest(".component");
var fld3 = $("[id*='G1_x0020_Field1Field_ctl00']").closest(".component");
var fld4 = $("[id*='G1_x0020_Field2Field_ctl00']").closest(".component");
// Subscribe to Choice Field changes
fldSelect.on('change', function() {
setVisiblity( this.value );
});
// Toggle fields components
function setVisiblity(condValue){
fld1.hide();
fld2.hide();
fld3.hide();
fld4.hide();
if(condValue == "Enter Choice #1"){
fld1.show();
fld2.show();
}
if(condValue == "Enter Choice #2"){
fld3.show();
fld4.show();
}
}
// Set visibility on form load
setVisiblity(fldSelect.val());