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

Question

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

我想这样做，所以提交时，调用的网址是

  

应用：//配置服务器= ...

服务器应该包含来自其中一个单选按钮或来自输入组的服务器属性的值

我试图这样做

<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代码）

Jfiddle Fiddle Link

<强> JS

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

<强> HTML

<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。

Answer 2

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

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

检查＆＃34; server＆＃34;的值当你得到它时，它为null或为空（＆＃34;＆＃34;），如果它获取了serverCustom的值。

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

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

Answer 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);
}