如何将Gravity Forms多页表单的答案存储到数组中？

你的代码思路没问题，但存在几个影响功能正常运行的细节问题，比如事件绑定失效、页面切换时未捕获答案、提交逻辑可能引发循环等，以下是修正并优化后的实现：

修正后的代码 #

// 初始化对应4个问题的答案数组，按问题顺序存储
const answers = new Array(4).fill(undefined);

// 捕获当前可见页面的单选答案并更新数组
function captureCurrentPageAnswer() {
    const currentPage = jQuery('.gform_page_visible');
    // 用Gravity Forms自带的data-page属性获取页面编号，比DOM索引更可靠
    const pageNumber = parseInt(currentPage.data('page'));
    // 获取当前页选中的单选框值
    const selectedValue = currentPage.find('.gfield--type-radio input:checked').val();
    
    // 确保页面编号在1-4范围内，避免数组越界
    if (pageNumber >= 1 && pageNumber <= 4) {
        answers[pageNumber - 1] = selectedValue;
    }
}

// 表单提交处理逻辑
function handleFormSubmit(event) {
    // 先捕获最后一页的答案
    captureCurrentPageAnswer();
    
    // 检查所有问题是否都已作答
    const allAnswered = answers.every(answer => answer !== undefined);
    
    if (!allAnswered) {
        event.preventDefault(); // 未完成全部问题时阻止提交
        console.log("请完成所有问题后再提交");
        // 这里可以添加前端提示，比如弹出提示框或高亮未完成页面
        return;
    }
    
    // 所有答案已收集，执行你需要的后续功能
    console.log("所有问题答案：", answers);
    // 示例：可以将数组存入本地存储
    // localStorage.setItem('formAnswers', JSON.stringify(answers));
}

// jQuery DOM就绪后绑定事件
jQuery(function($) {
    // 绑定表单提交事件
    $('#gform_3').on('submit', handleFormSubmit);
    
    // 单选框选中状态变更时，捕获当前页答案
    $('.gfield--type-radio input[type="radio"]').on('change', captureCurrentPageAnswer);
    
    // 用户点击上/下一页按钮时，捕获当前页的答案
    $('.gform_next_button, .gform_previous_button').on('click', function() {
        // 延迟执行，确保页面切换前完成当前页答案的捕获
        setTimeout(captureCurrentPageAnswer, 100);
    });
    
    // 页面加载完成时，若当前页已有选中值，先初始化捕获一次
    captureCurrentPageAnswer();
});

关键优化说明 #

• 稳定的页面编号获取：放弃依赖DOM索引的方式，改用Gravity Forms页面元素自带的data-page属性获取页面序号，避免表单结构调整导致的数组索引错位
• 覆盖所有场景的答案捕获：除了单选框变更和表单提交，补充了页面切换（上下页点击）和页面加载的场景，确保每一页的答案都能被及时存入数组
• 优化提交逻辑：仅在未完成全部问题时阻止表单提交，避免原代码中preventDefault后再调用submit()引发的循环提交问题
• 提前初始化数组：预先创建对应4个问题的数组位置，保证数组索引和问题顺序严格对应

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