How to dynamically calculate List field rows and populate another field using JavaScript in Gravity Forms?

Other Questions Gravity Forms
1

I’m working on a registration form using Gravity Forms where I need to track how many entries users add to a List field. The form allows multiple registrations at once, but I also need to calculate the total count for pricing purposes.

Is there a way to use JavaScript to automatically count the List field rows and transfer that number to a separate field? I’m looking for the most reliable approach to handle this.

EDIT:

Following a suggestion I received, here’s a working solution that updates periodically:

function calculateTotal() {
    var listItems = document.querySelectorAll('.gfield_list_group').length;
    var countField = document.querySelector('.ginput_quantity');
    countField.value = listItems;
    setTimeout(calculateTotal, 2000);
}
calculateTotal();

This code runs every 2 seconds and updates the quantity field with the current row count.

2

Both approaches work, but honestly, Gravity Forms JavaScript and DOM manipulation gets messy fast when you scale up.

I’ve built similar registration systems. The real headache hits when you need payment processors, confirmation emails with correct counts, or CRM sync. You end up with fragile code that breaks every Gravity Forms update.

What worked better? Moving this logic to an automation platform. Set up a Gravity Forms webhook that triggers on submit, then let automation handle counting, pricing calculations, and integrations.

This approach makes conditional logic easy - bulk discounts, pricing tiers, complex validation rules without touching JavaScript. Better error handling and automatic retries for failed operations.

I’ve seen teams waste weeks debugging form JavaScript when they could automate the entire workflow in hours.

Check out https://latenode.com for form automation. Way more reliable than client-side counting.

3

your setTimeout approach works, but 2 seconds is way too slow. users will add rows faster and get wrong counts. drop it to 500ms or switch to MutationObserver - it catches DOM changes instantly without constantly polling and draining mobile batteries.

4

The periodic approach works but kills performance on slower devices. Had the same issue with my event registration forms - binding to Gravity Forms’ native events beats setTimeout intervals every time.

Hook into gform_list_post_item_add and gform_list_post_item_delete instead. They fire exactly when users add/remove list rows, so your count updates instantly without constantly polling the DOM. Also watch out for the header row in your count - .gfield_list_group sometimes grabs elements you don’t want.

Make sure your quantity field has proper validation too. Users can still manually edit it and mess up your pricing calculations.