CODEWITHSUNDEEP
javascripthtmlforms
Michael
Michael

Reputation: 22957

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

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:

enter image description here

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

Upvotes: 3

Views: 7678

Answers (3)

Mike Ante
Mike Ante

Reputation: 756

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.

Upvotes: 5

Victorio Berra
Victorio Berra

Reputation: 3125

You cant use the same name for the text input. Radio buttons are fine because only one will be returned to the server.

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

Check to see if the value of "server" is null or empty ("") when you get it, and then if it is grab the value of serverCustom.

If you wish to use pure javascript to check the values, and send the data you require use this:

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

Upvotes: 3

Sid M
Sid M

Reputation: 4354

Is this what you are trying to do?

Fiddle: 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);
}

Upvotes: 1

Related Questions