Skip to content

gw-auto-add-list-row.js: Added snippet to automatically add a new last row to a List field. #1176

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 8, 2025
Merged

gw-auto-add-list-row.js: Added snippet to automatically add a new last row to a List field. #1176

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions gravity-forms/gw-auto-add-list-row.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/**
* Gravity Wiz // Gravity Forms // Auto Add Next List Row
* https://gravitywiz.com/
*
* Automatically adds a new row to a List field when the user types in the last row.
*
* Instruction Video: https://www.loom.com/share/0120ed39296b4e4988c7fdd054af070e
*
* Instructions:
*
* 1. Install this snippet with our free Code Chest plugin.
* https://gravitywiz.com/gravity-forms-code-chest/
*
* 2. Adjust the `listSelector` if needed to target a specific List field.
*
* 3. That's it — typing in the last row will automatically create the next one.
*/

// Selector for the List field container.
// You can refine this selector to target a specific List field, e.g. `.gfield_list_container input[name="input_6[]"]`
var listSelector = '.gfield_list_container';

/**
* Bind auto-add behavior to the last row input.
*/
function bindAutoAdd() {
$( listSelector ).each( function() {
var $container = $( this );
var $lastRow = $container.find( '.gfield_list_group' ).last();
var $input = $lastRow.find( 'input[type="text"]' );
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Support all input types in List fields.

The snippet only targets input[type="text"], but Gravity Forms List fields can contain textareas, selects, number inputs, and other field types. This significantly limits the snippet's applicability.

Apply this diff to support all input types:

-		var $input = $lastRow.find( 'input[type="text"]' );
+		var $input = $lastRow.find( 'input, textarea, select' ).first();

Note: Using .first() ensures we bind to the first input in the row, which is a reasonable trigger point for multi-column list fields.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
var $input = $lastRow.find( 'input[type="text"]' );
// instead of targeting only text inputs, bind to the first form control in the row
var $input = $lastRow.find( 'input, textarea, select' ).first();
🤖 Prompt for AI Agents 
In gravity-forms/gw-auto-add-list-row.js around line 30, the code currently only
finds input[type="text"] which misses textareas, selects, number inputs, etc.;
change the selector to use jQuery’s generic input selector (e.g. :input) and
call .first() on the matched set so the code binds to the first form control in
the new row, ensuring all field types are supported.


if ( ! $input.length ) {
return;
}

// Remove old handlers inside this container to avoid duplicates.
$container.find( 'input[type="text"]' ).off( 'input.autoAdd' );

// Initialize stored previous value (trimmed).
$input.data( 'lastVal', ( $input.val() || '' ).trim() );

// Bind only to the current last input.
$input.on( 'input.autoAdd', function() {
var $this = $( this );
var prev = $this.data( 'lastVal' ) || '';
var cur = ( $this.val() || '' ).trim();

// Trigger add only when it changed from empty → non-empty.
if ( prev === '' && cur !== '' ) {
var $addButton = $this.closest( '.gfield_list_group' ).find( '.add_list_item' );
if ( $addButton.length ) {
$addButton.trigger( 'click' );
}
}

// Update stored value.
$this.data( 'lastVal', cur );
} );
} );
}

/**
* Initial binding.
*/
bindAutoAdd();

/**
* Rebind after manual "Add" button click.
*/
$( document ).on( 'click', '.add_list_item', function() {
setTimeout( bindAutoAdd, 50 );
} );