带有单选输入和一个具有相同属性名称的文本输入的 HTML 表单答案

【问题标题】：HTML form with input radio and one text input with the same attribute name带有单选输入和一个具有相同属性名称的文本输入的 HTML 表单
【发布时间】：2014-07-09 14:25:53
【问题描述】：

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

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

app://configuration?server=...

server 应该包含 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 这样的第三方）

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

【问题讨论】：

当然，如果您使用另一个同名输入，您将收到 2 个条目。您必须更改文本输入的名称。
@christof13 这就是我想要避免的
您可以使用一个名为 server 的隐藏字段，并在提交前填写正确的值

标签： javascript html forms

【解决方案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。

【讨论】：

【解决方案2】：

您不能对文本输入使用相同的名称。单选按钮很好，因为只有一个会返回到服务器。

Other <input type="text" name="serverCustom" />

获取时查看“server”的值是否为null或空（“”），如果是则抓取serverCustom的值。

如果您希望使用纯 javascript 来检查值，并发送您需要的数据，请使用：

http://jsfiddle.net/Lord_Zero/w5x4h/

【讨论】：

您无法控制要发送此数据的服务器？您将不得不使用 JQuery 来拦截表单提交事件，检查服务器值，如果它的 "" 则执行 $.post 并将文本框值作为有效负载发送。如果您不能使用 Jquery 使用 Javascript 来执行我上面解释的操作，然后使用它来发送您的帖子 w3schools.com/ajax/ajax_xmlhttprequest_send.asp
我使用 jsfiddle 编辑了我的答案，该 jsfiddle 使用纯 JavaScript 梳理所有单选按钮，并发送获取请求。如果它找到带有“”的选定单选按钮，那么它将检查文本框的值并将其发送。如果没有选中的单选按钮，您可以通过添加 alert() 来改进我的代码。

【解决方案3】：

这是你想要做的吗？

小提琴： fiddle

 function submit(){
var curRadio = document.querySelector('input[name="server"]:checked').value;
    var serverValue;
    if(curRadio==4)
    {
        serverValue=document.getElementById("other").value;
    }
    else
    {
        serverValue=curRadio;
    }
    alert(serverValue);
}

【讨论】：