如何实现表单提交后才跳转到选中项对应的页面？

你的核心问题是当前代码在选择下拉项时直接跳转，完全没有经过表单提交流程。要实现「提交表单后再重定向」的需求，我们可以通过两种方式解决：

方法一：AJAX异步提交表单，成功后跳转 #

这种方式无需刷新页面，先把表单数据传给PHP处理，确认成功后再跳转到选中的链接。

修改后的完整代码：

<form id="myForm" method="POST" action="你的PHP处理脚本路径">
  <select data-select-name="" id="select-45ba" name="select" class="u-border-1 u-border-grey-30 u-input u-input-rectangle u-radius-50 u-white u-input-15">
    <option value="QTD">QTD</option>
    <option value="index.html">1 - R$32</option>
    <option value="https://linkedin.com">2 - R$64</option>
    <option value="https://twitter.com">3 - R$96</option>
    <option value="https://instagram.com">4 - R$128</option>
    <option value="https://youtube.com">5 - R$160</option>
  </select>
  
  <button type="submit">Submit</button>
</form>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('myForm');
  form.addEventListener('submit', function(e) {
    // 阻止默认的表单刷新提交行为
    e.preventDefault();
    
    const selectedUrl = document.getElementById('select-45ba').value;
    // 跳过默认的无效选项
    if (selectedUrl === 'QTD') {
      alert('请选择一个有效选项');
      return;
    }
    
    // 打包表单数据
    const formData = new FormData(this);
    
    // 异步提交到PHP处理
    fetch(this.action, {
      method: this.method,
      body: formData
    })
    .then(response => {
      if (response.ok) {
        // 提交成功后跳转目标页面
        window.location.href = selectedUrl;
      } else {
        alert('表单提交失败，请重试');
      }
    })
    .catch(error => {
      console.error('提交错误:', error);
      alert('提交出错，请检查网络');
    });
  });
});
</script>

方法二：表单正常提交，PHP处理后输出JS跳转 #

如果不想用AJAX，也可以让表单正常提交到PHP，处理完数据后，由PHP输出JS代码实现跳转（这不算PHP端的header重定向，符合你的需求）。

前端代码（移除原有跳转逻辑） #

<form method="POST" action="你的PHP处理脚本路径">
  <select data-select-name="" id="select-45ba" name="select" class="u-border-1 u-border-grey-30 u-input u-input-rectangle u-radius-50 u-white u-input-15">
    <option value="QTD">QTD</option>
    <option value="index.html">1 - R$32</option>
    <option value="https://linkedin.com">2 - R$64</option>
    <option value="https://twitter.com">3 - R$96</option>
    <option value="https://instagram.com">4 - R$128</option>
    <option value="https://youtube.com">5 - R$160</option>
  </select>
  
  <button type="submit">Submit</button>
</form>

PHP处理脚本示例 #

<?php
// 这里写你的表单数据处理逻辑，比如保存到数据库、记录日志等
$selectedValue = $_POST['select'] ?? 'QTD';

// 处理完成后，输出跳转JS
if ($selectedValue !== 'QTD') {
  echo "<script>window.location.href = '$selectedValue';</script>";
} else {
  // 若用户选了默认选项，提示并返回上一页
  echo "<script>alert('请选择有效选项'); window.history.back();</script>";
}
?>

关键改动说明 #

1. 移除原有onchange跳转：删掉了下拉框改变时直接跳转的逻辑，确保用户必须点击提交按钮才会触发流程。
2. 先提交后跳转：两种方案都保证表单数据先传给PHP处理，完成后再执行页面跳转。
3. 增加有效性判断：防止用户选中默认的「QTD」选项时触发无效跳转。

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