如何将仓库自助配置的选型数据同步至表单以实现报价请求？

核心思路 #

把每一步选型的选中值，实时同步到表单的对应字段（可用隐藏输入框，也可以用用户可见的只读字段），最后提交时就能把完整选型数据一起发出去。

1. 给选型选项加标识属性 #

给每个可点击的选型选项（比如仓库类型的按钮/图片）加上data-*属性，用来存储该选项的具体值，示例：

<!-- 仓库类型选项示例 -->
<div class="warehouse-option" data-type="standard" onclick="switchImage('standard')">标准仓库</div>
<div class="warehouse-option" data-type="large" onclick="switchImage('large')">大型仓库</div>

<!-- 对应的表单字段（可以是隐藏或可见） -->
<form id="quote-request-form">
  <input type="hidden" name="warehouse_type" id="warehouse-type-field">
  <input type="hidden" name="door_wood" id="door-wood-field">
  <input type="hidden" name="lock_type" id="lock-type-field">
  <input type="hidden" name="addons" id="addons-field">
  <!-- 其他表单字段：姓名、联系方式等 -->
  <button type="submit">提交报价请求</button>
</form>

2. 嵌入数据同步到现有切换脚本里 #

在你已经写好的图片切换函数中，加上同步表单字段的逻辑，不用额外写新的事件监听，示例：

// 仓库类型图片切换+数据同步
function switchWarehouseImage(type) {
  // 你已有的图片切换代码
  document.getElementById('warehouse-preview').src = `path/to/warehouse-${type}.jpg`;
  // 新增：把选中值写入表单
  document.getElementById('warehouse-type-field').value = type;
}

// 门用木材同理
function switchDoorWood(woodType) {
  document.getElementById('door-preview').src = `path/to/door-${woodType}.jpg`;
  document.getElementById('door-wood-field').value = woodType;
}

3. 锁具类型和附加配置的处理 #

如果是下拉框或多选框类型的选型，直接监听change事件同步值：

// 锁具类型下拉框
document.getElementById('lock-select').addEventListener('change', function() {
  document.getElementById('lock-type-field').value = this.value;
});

// 附加配置多选框（用逗号分隔选中值）
document.querySelectorAll('input[name="addon"]').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const selectedAddons = Array.from(document.querySelectorAll('input[name="addon"]:checked'))
      .map(item => item.value)
      .join(', ');
    document.getElementById('addons-field').value = selectedAddons;
  });
});

4. 提交前的必填校验（可选） #

防止用户没完成所有选型就提交，加个简单的校验：

document.getElementById('quote-request-form').addEventListener('submit', function(e) {
  const warehouseType = document.getElementById('warehouse-type-field').value;
  const doorWood = document.getElementById('door-wood-field').value;
  const lockType = document.getElementById('lock-type-field').value;

  if (!warehouseType || !doorWood || !lockType) {
    e.preventDefault();
    alert('请完成所有选型步骤后再提交报价请求');
  }
});

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