javascript - 具有输入单选框和一个具有相同属性名称的文本输入的 HTML 表单

Question

我正在尝试使用几个选项创建一个单选按钮组，最后一个选项将是文本输入字段“其他”。 像这样:

提交的时候我想这样做，调用的url是

app://configuration?server=...

服务器应该包含服务器属性的值，无论它来自单选按钮之一还是来自输入组

我试过了

<form method="GET" action="app://configuration">
  Select server <br>
  <input type="radio" name="server" value="1">Production<br>
  <input type="radio" name="server" value="2">Test<br>
  <input type="radio" name="server" value="3">Localhost<br>
  <input type="radio" name="server" value="">Other <input type="text" name="server" />
  <input type="submit" value="Submit">
</form>

我对单选按钮和输入字段使用了相同的 name 属性，结果是 name (服务器)在按下提交时被复制.

我明白为什么它不能以当前的方式工作。知道如何使用 javascript 实现类似的功能吗？ (请不要像 jquery 这样的第三方)

我无权更改服务器代码，所以我不能使用不同的属性名称，因为服务器不会知道...

Answer 1

试试这个纯javascript(修改你的html代码)

function changeradioother() {
  var other = document.getElementById("other");
  other.value = document.getElementById("inputother").value;
}

<input type="radio" name="server" value="1">Production<br>
<input type="radio" name="server" value="2">Test<br>
<input type="radio" name="server" value="3">Localhost<br>
<input type="radio" name="server" id="other" value="other">Other <input id="inputother" type="text" onchange="changeradioother()" />
<input type="submit" value="Submit">

我为最后一个单选按钮和输入框添加了一个 id。