多步骤表单如何通过JS在后续步骤显示上一步输入数据？

一、调整HTML结构 #

1. 第三步新增zone值展示区域 #

在第三步的描述文本后，添加一段用于显示第一步输入的zone值的内容：

<div class="content" id="content3">
    <h3><?php echo esc_html($settings['step3_title']); ?></h3>
    <p><?php echo  esc_html($settings['step3_descr']); ?></p>
    <!-- 新增：用来展示zone值的文本 -->
    <p id="zone-result-text">为 <span id="zone-display" style="font-weight: bold;"></span> 获取结果</p>
    <!-- 原有表单输入 -->
    <input type="text" class="step3data" name="nom" placeholder="<?php echo esc_html($settings['step3_prenom']); ?>">
    <input type="text" class="step3data" name="prenom" placeholder="<?php echo esc_html($settings['step3_nom']); ?>"><br />
    <input type="text" class="step3data" name="mail" placeholder="<?php echo esc_html($settings['step3_email']); ?>">
    <input type="text" class="step3data" name="tel" placeholder="<?php echo esc_html($settings['step3_phone']); ?>">
    <input type="hidden" name="token" value="um4b4cH5bSnA2WnQ7K98" />
    <input type="submit" value="<?php echo esc_attr($settings['step3_button_text']); ?>" />
</div>

2. 修复第二步的提交数据问题 #

原第二步的按钮为button类型，提交表单时不会传递选中值给后端，因此添加一个隐藏字段存储选中的delai值，并修改按钮的点击事件：

<div class="content" id="content2">
    <h3><?php echo esc_html($settings['step2_title']); ?></h3>
    <p><?php echo esc_html($settings['step2_descr']); ?></p>
    <!-- 新增：隐藏字段，存储选中的delai选项值 -->
    <input type="hidden" name="delai" id="hidden-delai">
    <!-- 修改按钮的onclick，传入当前按钮的value -->
    <input type="button" onclick="pickDelai('<?php echo esc_html($settings['step2_option_1']); ?>')" value="<?php echo esc_html($settings['step2_option_1']); ?>" />
    <input type="button" onclick="pickDelai('<?php echo esc_html($settings['step2_option_2']); ?>')" value="<?php echo esc_html($settings['step2_option_2']); ?>" />
    <input type="button" onclick="pickDelai('<?php echo esc_html($settings['step2_option_3']); ?>')" value="<?php echo esc_html($settings['step2_option_3']); ?>" />
    <input type="button" onclick="pickDelai('<?php echo esc_html($settings['step2_option_4']); ?>')" value="<?php echo esc_html($settings['step2_option_4']); ?>" />
</div>

二、更新JavaScript代码 #

1. 修改nextTab函数，添加第三步展示zone值的逻辑 #

function nextTab(tabId) {
    // 切换内容区域的显示状态
    const activeContent = document.querySelector('.content.active');
    const nextContent = document.getElementById(`content${tabId.slice(-1)}`);
    activeContent.classList.remove('active');
    nextContent.classList.add('active');

    // 切换标签的状态（页面无.tab元素可删除这段）
    const activeTab = document.querySelector('.tab.active');
    const nextTab = document.getElementById(tabId);
    if (activeTab && nextTab) {
        activeTab.classList.remove('active');
        if (activeTab !== nextTab) {
            activeTab.classList.add('valid');
        }
        nextTab.classList.add('active');
    }

    // 切换到第三步时，展示第一步的zone值
    if (tabId === 'tab3') {
        const zoneInput = document.querySelector('input[name="zone"]');
        const zoneDisplay = document.getElementById('zone-display');
        // 用户未输入时显示兜底文本
        zoneDisplay.textContent = zoneInput.value.trim() || '未知区域';
    }
}

2. 添加pickDelai函数，处理第二步的选项选择 #

function pickDelai(selectedValue) {
    // 将选中值存入隐藏字段，确保表单提交时后端能获取
    document.getElementById('hidden-delai').value = selectedValue;
    // 切换到第三步
    nextTab('tab3');
}

三、核心改动说明 #

• 第三步展示zone值：通过JS获取第一步name="zone"输入框的内容，动态填充到第三步的文本中，实现"为xxx获取结果"的效果。
• 第二步数据提交：用隐藏字段存储选中的选项值，解决原按钮无法提交数据的问题，后端可通过$_POST['delai']获取选中内容。
• 表单完整性：所有输入（含隐藏字段）均在<form>标签内，提交时会自动携带所有步骤的数据，后端通过$_POST['zone']、$_POST['nom']等即可获取对应值。

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