条件提交表单无法传递POST数据问题排查

嘿，这个问题我太熟了！你现在的问题在于，用location.href跳转本质是发起了一个全新的GET请求，和原来的表单POST提交完全是两回事——所以表单里的POST数据根本不会跟着跳过去。

要解决这个问题，我们只需要让表单正常完成POST提交，只是动态修改它要提交到的目标页面就行。给你两种简单可行的方案：

方案一：在表单提交时动态修改目标地址 #

这种方法是监听表单的提交事件，先临时修改表单的action属性，再让它正常提交，这样POST数据就会完整传递过去。

修改后的HTML：

<form id="form1" method="post" action="">
  <select id="man" name="man">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <button type="submit">Continue</button>
</form>

对应的JavaScript：

// 监听表单的提交事件
document.getElementById('form1').addEventListener('submit', function(e) {
  // 先阻止默认的提交行为，避免直接空提交
  e.preventDefault();
  
  // 获取选择框的值
  const selectedValue = document.getElementById('man').value;
  
  // 根据选择设置表单要提交到的地址
  if (selectedValue === '0') {
    this.action = 'page2.php';
  } else {
    this.action = 'page3.php';
  }
  
  // 现在让表单正常提交，POST数据会一起发送到目标页面
  this.submit();
});

方案二：实时修改表单的目标地址 #

如果你希望用户选择选项时就提前设置好提交地址，也可以监听选择框的change事件，实时更新表单的action：

JavaScript代码：

document.getElementById('man').addEventListener('change', function() {
  const form = document.getElementById('form1');
  // 根据当前选择更新表单的action
  form.action = this.value === '0' ? 'page2.php' : 'page3.php';
});

对应的HTML和方案一一致就行，表单的action留空或者填个初始值都可以。这样用户选完选项后，表单已经指向了正确的页面，点击提交时就会直接以POST方式把数据发过去。

为什么原来的方法不行？ #

你之前用action="javascript:redirect();"会让表单的默认提交行为被替换成执行那段JS，而location.href只是让浏览器跳转到新页面，这个跳转过程不会携带任何表单的POST数据——它就像你手动在地址栏输入URL一样，是纯GET请求，自然拿不到表单里的内容。

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