gw-auto-add-list-row.js: Added snippet to automatically add a new last row to a List field.
#1176
Conversation
…ast row to a List field.
WalkthroughIntroduces a new JavaScript snippet that auto-appends a row to Gravity Forms List fields when the user begins typing in the last row. It binds input listeners to the last row, detects transition from empty to non-empty, clicks the add button, and rebinds after additions to track the new last row. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant P as Page Load
participant S as AutoAdd Script
participant C as List Field Container
participant L as Last Row Input
participant B as Add Button (.add_list_item)
P->>S: Initialize
S->>C: Query all .gfield_list_container
loop per container
S->>L: Bind input listener (store lastVal)
S->>B: Bind click listener (rebind after add)
end
U->>L: Type character
L-->>S: input event (prev empty → now non-empty)
S->>B: trigger click()
B->>C: Add new row to list
Note over S,C: After short delay, rebind to new last row
S->>C: Cleanup old listeners and rebind
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
gravity-forms/gw-auto-add-list-row.js (5)
1-17: Document the jQuery dependency.The snippet relies on jQuery but doesn't mention it in the instructions. Add a note about the jQuery requirement to help users troubleshoot if issues arise.
Apply this diff to add the dependency note:
* Instructions: * + * 0. Ensure jQuery is loaded (Gravity Forms includes it by default). + * * 1. Install this snippet with our free Code Chest plugin. * https://gravitywiz.com/gravity-forms-code-chest/
19-21: Consider usingconstinstead ofvar.Modern JavaScript best practice favors
constfor values that won't be reassigned. This also provides better scoping and avoids unintended global pollution.Apply this diff:
-var listSelector = '.gfield_list_container'; +const listSelector = '.gfield_list_container';
37-37: Consider more targeted handler cleanup.The current approach removes handlers from all text inputs in the container, even though only the last input needs rebinding. While this works and prevents duplicates, a more targeted approach would be to track and remove only the handler from the previously bound input.
However, the current implementation is clear and safe, so this is just a minor optimization suggestion. You may keep it as-is if preferred.
65-65: Wrap initial binding in a DOM ready check.The script calls
bindAutoAdd()immediately, which may fail if the form hasn't rendered yet. While Gravity Forms typically loads scripts after the DOM, explicitly wrapping this in a ready check ensures reliability across different loading scenarios.Apply this diff:
-bindAutoAdd(); +$( document ).ready( function() { + bindAutoAdd(); +} );Or use the shorthand:
-bindAutoAdd(); +$( bindAutoAdd );
70-72: Verify the 50ms delay is sufficient across browsers.The arbitrary 50ms timeout may be insufficient if DOM manipulation is slow, or excessive if it's fast. While this approach is simple and likely works in most cases, consider whether a more robust approach is needed.
Optional enhancement: Use
requestAnimationFramefor more reliable timing:$( document ).on( 'click', '.add_list_item', function() { - setTimeout( bindAutoAdd, 50 ); + requestAnimationFrame( function() { + setTimeout( bindAutoAdd, 0 ); + } ); } );This ensures the rebind happens after the next browser paint, which is more reliable than an arbitrary delay. However, the current implementation is acceptable if it works consistently in your testing.
| $( listSelector ).each( function() { | ||
| var $container = $( this ); | ||
| var $lastRow = $container.find( '.gfield_list_group' ).last(); | ||
| var $input = $lastRow.find( 'input[type="text"]' ); |
There was a problem hiding this comment.
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.
| 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.
1 participant
Context
⛑️ Ticket(s): https://secure.helpscout.net/conversation/3094351964/90041
Summary
Adds a new snippet that automatically appends a new row to Gravity Forms List fields when the user types in the last row.
Improves user experience by streamlining data entry and removing the need to manually click the “Add” button.
https://www.loom.com/share/0120ed39296b4e4988c7fdd054af070e