修改WP Forms JavaScript代码控制Next按钮显示逻辑（保留原有功能）

Here's the modified JavaScript code that implements your requirement—showing the Next button only when the current page has at least one selected icon choice, or after clicking the Back button—while keeping your existing progress functions intact:

// Keep your original progress functions unchanged
function progressNextReset() {
    // Your existing function logic here
    // Example: Reset progress bar state on next step
}

function progressBackReset() {
    // Your existing function logic here
    // Example: Revert progress bar state on back step
}

// Helper to check if current active page has any selected icon choices
function hasSelectedItems() {
    const activePage = document.querySelector('.wpforms-page.active');
    if (!activePage) return false;
    return activePage.querySelector('.wpforms-icon-choices-item.wpform-selected') !== null;
}

// Control Next button visibility
function updateNextButtonState() {
    const nextBtn = document.querySelector('.wpforms-page-button-next');
    if (!nextBtn) return;

    // Show button if: current page has selected items OR user clicked Back
    nextBtn.style.display = (hasSelectedItems() || window.wpformsBackClicked) ? 'block' : 'none';
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
    // Track if user clicked the Back button
    window.wpformsBackClicked = false;
    
    // Set initial Next button state
    updateNextButtonState();

    // Listen for selection changes on icon choices
    document.addEventListener('click', (e) => {
        if (e.target.closest('.wpforms-icon-choices-item')) {
            // Wait a moment for WP Forms to update the selected class
            setTimeout(updateNextButtonState, 80);
        }
    });

    // Handle Back button click
    const backBtn = document.querySelector('.wpformButtonBack');
    if (backBtn) {
        backBtn.addEventListener('click', () => {
            window.wpformsBackClicked = true;
            updateNextButtonState();
            // Run original back progress function
            progressBackReset();
        });
    }

    // Handle Next button click (reset back flag for subsequent pages)
    const nextBtn = document.querySelector('.wpforms-page-button-next');
    if (nextBtn) {
        nextBtn.addEventListener('click', () => {
            window.wpformsBackClicked = false;
            // Run original next progress function
            progressNextReset();
        });
    }
});

Key Changes Explained: #

• Back Button Click Tracking: We use window.wpformsBackClicked to flag when the user navigates back, ensuring the Next button becomes visible immediately after this action.
• Selected Item Validation: The hasSelectedItems function targets only the active form page and checks for any icon choice elements with the wpform-selected class.
• Dynamic State Updates: We listen for clicks on icon choices to refresh the Next button state (using a short timeout to account for WP Forms' internal class update delay).
• Unmodified Original Functions: Your progressNextReset and progressBackReset functions remain untouched and are still triggered when their respective buttons are clicked.

Notes: #

• Adjust the display property (block/none) to match your theme's styling if needed (some themes might use visibility or other properties instead).
• Update selectors if your form uses different class names for pages or buttons to match your actual HTML structure.

内容的提问来源于stack exchange，提问作者Ahmed