HTML多步骤表单单选框值无法获取 需通过Webhook发送到Integromat咨询

问题根源 #

你在input[type=radio], input[type=checkbox]的点击事件中调用了e.preventDefault()，该方法会取消浏览器默认行为，直接阻止了单选/复选框被标记为checked状态，因此表单提交时识别不到已选中的选项，自然无法传递对应值。 #

修复方案 #

第一步：修改核心JS逻辑 #

删除单选/复选点击事件中的e.preventDefault()，同时可以保留点击自动跳转下一题的功能，对接Webhook可以增加统一的表单提交数据收集逻辑，修改后的代码如下：

$(document).ready(function() {
    'use strict';

  $('input[type=radio], input[type=checkbox]').on('click', function(e) {
    // 移除e.preventDefault()，保留单选/复选的默认选中行为
    $(this).parents('.test-step').next().addClass('active');
    $(this).parents('.test-step').removeClass('active');
  })

  $('.test-step .prev-btn').on('click', function(e) {
    e.preventDefault();
    $(this).parents('.test-step').prev().addClass('active');
    $(this).parents('.test-step').removeClass('active');
  })

  // 对接Integromat Webhook的提交逻辑
  $('#wrapped').on('submit', function(e) {
    e.preventDefault();
    // 自动收集所有表单字段值，包含已选中的单选、复选和输入框内容
    let submitData = new FormData(this);

    // 发送数据到Webhook
    fetch('替换为你的Integromat Webhook地址', {
      method: 'POST',
      body: submitData
    }).then(res => res.json())
    .then(() => {
      // 提交成功后的自定义逻辑，比如弹出成功提示
      alert('表单提交成功');
    }).catch(err => {
      console.error('提交失败：', err);
    })
  })
})

第二步：HTML调整（可选） #

你当前的提交按钮加了data-toggle="modal"模态框触发属性，如果需要先弹窗确认再提交，注意将提交逻辑绑定到模态框的确认按钮上，避免未确认就触发提交导致数据丢失；如果不需要弹窗可以直接删除该属性。 #

验证效果 #

修改后点击单选/复选选项，可以看到选项会出现默认的选中状态标记，提交时所有字段值都会被正常收集，Integromat可以接收到完整的表单数据。

内容的提问来源于stack exchange，提问作者Yağız Gürbüz