Home / Admin / Show a Live Count of Repeater Fields in Your Form
Duplicate Snippet

Embed Snippet on Your Site

Show a Live Count of Repeater Fields in Your Form

This code snippet will display a live count of how many repeater field rows have been added to your form

<10
Code Preview
php
<?php
/**
 * Update the "Count" field in real-time with the quantity of repeater fields.
 */
function wpf_update_repeater_count() {
    ?>
    <script type="text/javascript">
        (function() {
            // Function to update the Count field
            function updateCountField() {
                // Get the repeater field container
                var repeaterContainer = document.getElementById('wpforms-5410-field_1-container');
                if (!repeaterContainer) return;
                // Find all repeater rows (clones and the initial row)
                var rows = repeaterContainer.querySelectorAll('.wpforms-field-layout-rows');
                var count = rows.length;
                // Set the value of the 'Count' field
                var countInput = document.getElementById('wpforms-5410-field_3');
                if (countInput) {
                    countInput.value = count;
                }
            }
            // Make the Count field read-only
            function makeCountFieldReadOnly() {
                var countInput = document.getElementById('wpforms-5410-field_3');
                if (countInput) {
                    countInput.readOnly = true;
                }
            }
            // Initialize the updater
            function initCountUpdater() {
                makeCountFieldReadOnly();
                var repeaterContainer = document.getElementById('wpforms-5410-field_1-container');
                if (!repeaterContainer) return;
                updateCountField();
                // Create a MutationObserver to watch for changes in the repeater container
                var observer = new MutationObserver(function(mutationsList) {
                    updateCountField();
                });
                // Start observing the repeater container for child list changes
                observer.observe(repeaterContainer, { childList: true, subtree: true });
                // Also update the count when the Add or Remove buttons are clicked
                repeaterContainer.addEventListener('click', function(event) {
                    if (event.target && (event.target.classList.contains('wpforms-field-repeater-button-add') || event.target.classList.contains('wpforms-field-repeater-button-remove'))) {
                        // Use a slight delay to ensure the DOM has updated
                        setTimeout(updateCountField, 50);
                    }
                });
            }
            // Run the initializer when the DOM is ready
            document.addEventListener("DOMContentLoaded", function() {
                initCountUpdater();
            });
        })();
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_update_repeater_count', 30 );

Comments

Add a Comment