In this guide, we will share an example of disabling fields in a repeat group when adding new entries and editing existing repeat entries.
Example form template:
For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂
// Array of field IDs to listen for changes
var tracked_field_ids = [
'a812-9456-3264' /* Checkbox Field */
];
var tracked_repeat_group_id = '9da3-bdd8-dd35'; /* Repeat Group */
// Update field attributes after a field is changed
function update_field_attributes( options ) {
// Check field values and update field attributes
// Check for a specific tracked field - Checkbox Field
if ( options.changed_field.get( 'component_id' ) == 'a812-9456-3264' ) {
// Update fields in the repeat group entry - Text Field
var target_field = options.repeat_fields.findWhere( {
component_id: '6769-42ff-13f9'
} );
// Check for a specific field value
if ( options.changed_field.get( 'value' ) == true ) {
// Set target field HTML attributes
target_field.get( 'attributes' ).options = [ {
type: 'input',
attribute: 'disabled',
value: 'true'
} ];
} else {
// Set target field HTML attributes
target_field.get( 'attributes' ).options = [];
}
// Trigger field change
target_field.trigger( 'change' );
}
}
// Listen to the new repeat entry fields
for ( tracked_field_id of tracked_field_ids ) {
// Add field listener
window.formyoula.form_fields[ tracked_field_id ].on( 'input:set:success', function() {
// Update attributes
update_field_attributes( {
changed_field: this,
repeat_fields: window.formyoula.form_fields[ tracked_repeat_group_id ].get( 'components' ),
is_existing_entry: false
} );
} );
}
// Listening to all field changes in an existing repeat group item
formyoula.form_fields[ tracked_repeat_group_id ].on( 'all', function( event, data ) {
// Check if field updates are available
if ( !data || _.isEmpty( data.updated_sub_component ) ) return;
// Get the actual field that was changed
var component = data.updated_sub_component;
// Check if repeat field component changes should be tracked
if ( tracked_field_ids.includes( component.get( 'component_id' ) ) ) {
// Update date fields
update_field_attributes( {
changed_field: component,
repeat_fields: data.updated_repeat_item,
is_existing_entry: true
} );
}
} );