Dynamic Row Labels for List Fields

Dynamically populate the first column of a List field with a dynamic value that includes the row number. For example, if your List field represents attendees to an event, you could label each row, “Attendee #1, Attendee #2, etc).

Instructions

  1. Install this snippet with our free Custom JavaScript plugin. https://gravitywiz.com/gravity-forms-code-chest/
  2. Update variables to match your form by following the inline instructions.

Code

Filename: gpalf-dynamic-row-labels.js

/**
 * Gravity Perks // Auto List Field // Dynamic Row Labels for List Fields
 * https://gravitywiz.com/documentation/gravity-forms-auto-list-field/
 *
 * Dynamically populate the first column of a List field with a dynamic value that includes the row number.
 * For example, if your List field represents attendees to an event, you could label each row, "Attendee #1,
 * Attendee #2, etc).

 * Instructions:
 *
 * 1. Install this snippet with our free Custom JavaScript plugin.
 *    https://gravitywiz.com/gravity-forms-code-chest/
 * 2. Update variables to match your form by following the inline instructions.
 */
// Update to your List field's ID.
let listFieldId = 1;

// Update to the value you would like populated; {0} is replaced with the row number.
let template    = 'Day {0}';

function gw_apply_list_field_value_template( $container, $row ) {
	let $rows;
	if ( $row ) {
		$rows = $row;
	} else {
		$rows = $container.find( '.gfield_list_group' );
	}
	$rows.each( function() {
		let rowIndex = $container.find( '.gfield_list_group' ).index( $( this ) );
		$( this )
			.find( 'input' )
			.eq( 0 )
			.val( template.gformFormat( rowIndex + 1 ) );
	} );
}

gw_apply_list_field_value_template( $( '#field_GFFORMID_{0}'.gformFormat( listFieldId ) ) );

gform.addAction( 'gform_list_post_item_add', function ( $row, $container ) {
	if ( gf_get_input_id_by_html_id( $container.parents( '.gfield' ).attr( 'id' ) ) == listFieldId ) {
		gw_apply_list_field_value_template( $container );
	}
} );

gform.addAction( 'gform_list_post_item_delete', function ( $container ) {
	if ( gf_get_input_id_by_html_id( $container.parents( '.gfield' ).attr( 'id' ) ) == listFieldId ) {
		gw_apply_list_field_value_template( $container );
	}
} );

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.