如何修改表单提交逻辑，生成符合Tumblr要求的标签URL？

我有一个表单，提交时会生成diff=easy&know=high&lang=francais这类参数。把表单action设为<form action="https://adressedetest.tumblr.com/tagged/">时，会跳转至https://adressedetest.tumblr.com/tagged/?diff=easy&know=high&lang=francais。

我需要修改代码，把输出参数从diff=easy&know=high&lang=francais改成easy_high_francais，并且让表单跳转至https://adressedetest.tumblr.com/tagged/easy_high_francais——带&的URL会导致Tumblr返回404错误，所以不能用查询参数的形式。

之前试了oninput="diff.value_know.value_lang.value"来拼接格式，但根本改不了跳转路径，地址还是原来的样子。

原代码：

<!DOCTYPE html>
<html>
<body>
<div>
  <form action="https://adressedetest.tumblr.com/tagged/" oninput="diff.value_know.value_lang.value">
    <label for="diff">Difficulty</label>
    <select id="diff" name="diff">
      <option value="none">None</option>
      <option value="easy">Easy</option>
      <option value="medium">Medium</option>
      <option value="hard">Hard</option>
    </select>

    <label for="know">Knowledge</label>
    <select id="know" name="know">
      <option value="none">None</option>
      <option value="low">Low</option>
      <option value="medium">Medium</option>
      <option value="high">High</option>
    </select>

    
    <label for="lang">Language</label>
    <select id="lang" name="lang">
      <option value="francais">Français</option>
      <option value="english">English</option>
      <option value="russian">Русский</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

要实现需求，得用JavaScript拦截表单提交事件，手动拼好URL再跳转，具体步骤如下：

1. 删掉表单原有的oninput属性，加个onsubmit事件处理函数，阻止默认提交行为。
2. 在函数里获取三个下拉框的选中值，用下划线拼成目标字符串。
3. 把这个字符串拼到表单的action地址后面，然后跳转。

修改后的代码：

<!DOCTYPE html>
<html>
<body>
<div>
  <form action="https://adressedetest.tumblr.com/tagged/" onsubmit="handleSubmit(event)">
    <label for="diff">Difficulty</label>
    <select id="diff" name="diff">
      <option value="none">None</option>
      <option value="easy">Easy</option>
      <option value="medium">Medium</option>
      <option value="hard">Hard</option>
    </select>

    <label for="know">Knowledge</label>
    <select id="know" name="know">
      <option value="none">None</option>
      <option value="low">Low</option>
      <option value="medium">Medium</option>
      <option value="high">High</option>
    </select>

    
    <label for="lang">Language</label>
    <select id="lang" name="lang">
      <option value="francais">Français</option>
      <option value="english">English</option>
      <option value="russian">Русский</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

<script>
function handleSubmit(event) {
  // 阻止表单默认提交，避免自动生成查询参数
  event.preventDefault();
  
  // 获取三个下拉框的选中值
  const diffValue = document.getElementById('diff').value;
  const knowValue = document.getElementById('know').value;
  const langValue = document.getElementById('lang').value;
  
  // 用下划线拼接成目标格式
  const tagString = `${diffValue}_${knowValue}_${langValue}`;
  
  // 拼出完整的跳转URL
  const baseUrl = event.target.action;
  const targetUrl = baseUrl + tagString;
  
  // 跳转到目标地址
  window.location.href = targetUrl;
}
</script>

</body>
</html>

关键说明 #

• event.preventDefault()：这一步很重要，能阻止表单默认的GET提交方式，不然浏览器会自动把表单字段拼成查询参数。
• 手动拼接URL：直接把三个选中值用下划线连起来，追加到action地址末尾，正好符合https://adressedetest.tumblr.com/tagged/easy_high_francais的格式。
• 这种方式完全自定义跳转路径，绕开了表单默认的参数生成逻辑，不会出现带&的URL，也就不会触发Tumblr的404错误。

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