HTML form with input radio and one text input with the same attribute name

Question

I am trying to do a radio buttons group with couple of options and the last option will be a text input field "Other". Something like this:

I want to do it so when submitted, the url called is

app://configuration?server=...

server should contain the value of the server attribute wether it's from one of the radio buttons or from the input group

I tried to do this

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

I have used the same name attribute for the radio buttons and the input field and the result is that the name (server) is being duplicated when the submit is pressed.

I understand why it doesn't work in the current way. Any idea how to achieve something like this with javascript ? (no third party like jquery please)

I have no access to change the server code so I can't use a different attribute name because the server will not know it...

Answer 1

Try this pure javascript (modified your html code)

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

I added an id to the last radio button and the inputbox.