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...
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With