如何在多步骤表单中把值存储到JavaScript对象中？

我用jQuery实现了一个4步骤的向导表单，每一步的「下一步」按钮绑定了点击事件监听器。第一步包含age、height、weight输入字段，第二步是exercise单选框组。

当前代码 #

jQuery(document).on('click', '.next-step', function() {
    var currentstep = parseInt(jQuery(this).attr('data-step'));
    var nextstap = currentstep + 1;
    var age = jQuery('#ageYears').val();
    var weight = jQuery('#weightKgPound').val();
    var height = jQuery('#heightCmMeter').val();
    var height = jQuery('#heightCmMeter').val(); // 重复获取，不影响核心问题
    var exercise = jQuery('input:radio[name=practice-sport]:checked').val();
    
    // 步骤UI切换逻辑
    jQuery('.wizard-stape-cart').hide();
    jQuery('#wizard_stape_' + nextstap).show();
    jQuery('.pSteps[ data-tab-id="' + currentstep + '"]').addClass("completeStep");
    jQuery('.pSteps[ data-tab-id="' + nextstap + '"]').addClass("activeStep");
    jQuery('.pSteps[ data-tab-id="' + currentstep + '"]').removeClass("activeStep");
    jQuery('html, body').animate({
        scrollTop: jQuery("body").offset().top
    }, 1200);

    switch(currentstep) {
        case 1:
            var measurements = {
                age: age,
                weight: weight,
                height: height
            };
        break;
        case 2:
            var practice_sport = {
                exercise: exercise
            };
        break;
        default:
        console.log(currentstep);
    }

    userDetails(measurements, practice_sport);
});

function userDetails(measurements, practice_sport) {
    var userDetails = {
        measurements,
        practice_sport
    };
    console.log(userDetails);
}

问题现象 #

• 点击第一步「下一步」时，控制台输出：

  measurements: {age: '50', weight: '80', height: '178'}
  practice_sport: undefined
  

• 点击第二步「下一步」时，控制台输出：

  measurements: undefined
  practice_sport: {exercise: 'on'}
  

期望效果 #

每次点击「下一步」时，控制台都能输出完整的用户数据对象：

measurements: {age: '50', weight: '80', height: '178'}
practice_sport: {exercise: 'on'}

核心问题分析 #

每次点击按钮时，measurements和practice_sport都是当前点击事件的局部变量，跨步骤时未定义的变量自然会变成undefined。比如第一步只定义了measurements，第二步只定义了practice_sport，导致传参时总有一个值缺失。

修改方案：用全局变量持久化数据 #

把用户数据对象定义在事件监听器外部，作为全局（或父作用域）变量，每次步骤切换时更新对应字段，就能保留所有步骤的数据：

// 全局变量：持久化保存所有步骤的用户数据
var userData = {
    measurements: {},
    practice_sport: {}
};

jQuery(document).on('click', '.next-step', function() {
    var currentstep = parseInt(jQuery(this).attr('data-step'));
    var nextstap = currentstep + 1;
    
    // 保留原UI切换逻辑
    jQuery('.wizard-stape-cart').hide();
    jQuery('#wizard_stape_' + nextstap).show();
    jQuery('.pSteps[ data-tab-id="' + currentstep + '"]').addClass("completeStep");
    jQuery('.pSteps[ data-tab-id="' + nextstap + '"]').addClass("activeStep");
    jQuery('.pSteps[ data-tab-id="' + currentstep + '"]').removeClass("activeStep");
    jQuery('html, body').animate({
        scrollTop: jQuery("body").offset().top
    }, 1200);

    switch(currentstep) {
        case 1:
            // 更新第一步数据到全局对象
            userData.measurements = {
                age: jQuery('#ageYears').val(),
                weight: jQuery('#weightKgPound').val(),
                height: jQuery('#heightCmMeter').val()
            };
            break;
        case 2:
            // 更新第二步数据到全局对象
            userData.practice_sport = {
                exercise: jQuery('input:radio[name=practice-sport]:checked').val()
            };
            break;
        default:
            console.log(currentstep);
    }

    // 传入全局保存的完整数据
    userDetails(userData.measurements, userData.practice_sport);
});

function userDetails(measurements, practice_sport) {
    var userDetails = {
        measurements,
        practice_sport
    };
    console.log(userDetails);
}

额外优化建议 #

1. 删除原代码中重复的var height = jQuery('#heightCmMeter').val();行，减少冗余。
2. 可以在步骤切换前添加表单验证逻辑，比如第一步确保age、height、weight都有有效值再允许跳转，避免空数据提交。

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