html - 带有普通 HTML 的表单中单选输入中的多个值

Question

我的目标是为我网站上的一个小组件创建一个表单来处理禁用的 JavaScript 体验。目前我有以下表格:

<form method="GET" action="https://mywebsite.com/somedirectory/">

    <input type="radio" id="uid1" name="someParam" value="fruity" />
    <label for="uid1">Fruit</label>

    <input type="radio" id="uid2" name="someParam" value="veggie" />
    <label for="uid2">Vegetable</label>

    ...other radio options

    <input type="submit" value="Submit" />
</form>

单击任一单选选项，然后单击提交按钮将导致:

option 1: https://mywebsite.com/somedirectory/?someParam=fruity
option 2: https://mywebsite.com/somedirectory/?someParam=veggie

如何为每个 radio 选项添加另一个值？说我想通过 someOtherParam每个选项都是独一无二的，我想将其作为选项的输出:

option 1: https://mywebsite.com/somedirectory/?someParam=fruity&someOtherParam=apple
option 2: https://mywebsite.com/somedirectory/?someParam=veggie&someOtherParam=pepper

我尝试过的是:

<input type="radio" id="uid1" name="someParam" value="fruity&someOtherParam=apple" />
<input type="radio" id="uid2" name="someParam" value="veggie&someOtherParam=pepper" />

然而， &符号转换为 %26在链接内，感觉太hacky了。有没有更好的方法来实现这一目标？另外，有没有办法确保仅在选择单选选项后才启用提交按钮？
附言我的目标是不涉及 Javascript 的纯 HTML 体验。那可能吗？

Answer 1

我很确定这在不使用 JS 的现代浏览器中是不可能的。也许在旧浏览器上你可以用 CSS 和 display:none 做一些技巧。因为 it used to not send fields with display:none ，但现在这不是一种选择。
如果您可以允许 Javascript，您可以为每个单选选项添加一个数据属性，并使用它在更改时填充额外的隐藏输入。

document.querySelectorAll('input[type=radio][name="someParam"]')
  .forEach(radio => radio.addEventListener('change', (event) =>
    document.getElementById('someOtherParam').value = event.target.dataset.extraValue
  ));

<form method="GET" action="https://mywebsite.com/somedirectory/">
  <input type="radio" id="uid1" name="someParam" value="fruity" data-extra-value="apple" />
  <label for="uid1">Fruit</label>

  <input type="radio" id="uid2" name="someParam" value="veggie" data-extra-value="pepper" />
  <label for="uid2">Vegetable</label>

  <input type="hidden" id="someOtherParam" name="someOtherParam">

  <input type="submit" value="Submit" />
</form>