Listen To Field Changes Inside Repeat Group

We can listen to changes inside existing and new repeat item views with the following JavaScript code examples.

Using jQuery to listen to all input field changes in new and existing repeat group items.

// Listen to a specific repeat group and all its input field changes based on the repeat component Id
$('#component-7b6a-bd17-1576').on('change', '.input_content', function(event) {
	// Get field value
	var field_value = $(this).val();
	// Get field/component id
  var field_id = $(event.currentTarget).closest(".form-group").attr("id").replace("component-", "");
	// Get field value
	var field_label = window.formyoula.form_fields[field_id].get('label');
});

Please update the "#component-7b6a-bd17-1576" with your Repeat Group Id.

image

Listening to field changes in new repeat group views.

image
// Listen to field changes
formyoula.form_fields['Text Field'].on('all', function (options) {
	// Get field value
	var field_label = this.get('label');
	// Get field value
	var field_value = this.get('value');
	// Get field Id
	var field_id = this.get('component_id');
});

// Listen to field changes
formyoula.form_fields['Number Field'].on('all', function (options) {
	// Get field value
	var field_label = this.get('label');
	// Get field value
	var field_value = this.get('value');
	// Get field Id
	var field_id = this.get('component_id');
});

// Listen to field changes
formyoula.form_fields['Email Field'].on('all', function (options) {
	// Get field value
	var field_label = this.get('label');
	// Get field value
	var field_value = this.get('value');
	// Get field Id
	var field_id = this.get('component_id');
});

Listening to field changes in existing repeat group views.

image
// Listen to existing repeat group item changes
formyoula.form_fields['Repeat Group'].on('repeat:item:change', function (options) {
	// Check if field updates are available 
	if ( _.isEmpty( options.updated_sub_component ) ) return;
	// Get field value
	var field_label = options.updated_sub_component.get('label');
	// Get field value
	var field_value = options.updated_sub_component.get('value');
	// Get field Id
	var field_id = options.updated_sub_component.get('component_id');
});

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂