In this guide, we will explain how to set the date field values in a Repeat Group.
- Drag and drop a JavaScript, a Repeat Group element and 3 Date elements inside the Repeat group. Rename the Date elements as shown below.
- Click the pencil icon in the JavaScript element and Paste the code.
Please use the below code:
// Add days to a date function
function addDays( date, days ) {
var res = new Date( date );
res.setDate( res.getDate() + days );
return res;
}
// Main function to set the date field values
function set_final_date( options ) {
// Get initial date that was set by the user
var initial_date = new Date( options.date_field_1.get( 'value' ) );
// Set additional dates
var date_2 = addDays( initial_date, 90 );
var date_3 = addDays( initial_date, 180 );
// Check initial date
if ( initial_date ) {
// Set new date value
options.date_field_2.set( {
value: date_2
} );
// Set new date value
options.date_field_3.set( {
value: date_3
} );
}
}
// Set date field ids
var date_field_1_id = '8d62-fc9c-c783';
var date_field_2_id = 'd916-4ca4-2c3d';
var date_field_3_id = '6348-ae4d-f83d';
window.formyoula.form_fields[ date_field_1_id ].on( 'all', function() {
// Update date fields
set_final_date( {
date_field_1: this,
date_field_2: window.formyoula.form_fields[ date_field_2_id ],
date_field_3: window.formyoula.form_fields[ date_field_3_id ]
} );
} );
// Set repeat id to listen to
var repeat_id = '8208-e91d-d378';
// Listening to all field changes in an existing repeat group item list
formyoula.form_fields[ repeat_id ].on( 'all', function( event, data ) {
// Check if field updates are available
if ( !data || _.isEmpty( data.updated_sub_component ) ) return;
// Get actual field that was changed
var component = data.updated_sub_component;
// Check if repeat field component changes should be tracked
if ( component.get( 'component_id' ) == date_field_1_id ) {
// Update date fields
set_final_date( {
date_field_1: component,
date_field_2: data.updated_repeat_item.findWhere( {
component_id: date_field_2_id
} ),
date_field_3: data.updated_repeat_item.findWhere( {
component_id: date_field_3_id
} )
} );
} else if ( component.get( 'component_id' ) == date_field_2_id ) {
set_final_date( {
date_field_1: data.updated_repeat_item.findWhere( {
component_id: date_field_1_id
} ),
date_field_2: component,
date_field_3: data.updated_repeat_item.findWhere( {
component_id: date_field_3_id
} )
} );
} else if ( component.get( 'component_id' ) == date_field_3_id ) {
set_final_date( {
date_field_1: data.updated_repeat_item.findWhere( {
component_id: date_field_1_id
} ),
date_field_2: data.updated_repeat_item.findWhere( {
component_id: date_field_3_id
} ),
date_field_3: component
} );
}
// Trigger repeat save
formyoula.form_fields[ repeat_id ].trigger( 'repeat:save' );
} );
- Update the Field Ids in the code according to your form elements.
- Save the Changes and try the form.
For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂