How can I add an "Other" text input to a set of radio buttons in an HTML form?

Question

I'm trying to create a form with a write-in "other" option as the last radio button. I've tried variants of the following with no success:

<label><input type="radio" name="candidate" value="option1">First Option</label>
<label><input type="radio" name="candidate" value="option2">Second Option</label>
<label><input type="radio" name="candidate" value="other">OTHER</label><input type="text" name="other" value="Write In" />

Is it possible to have a radio button with a text input that passes its value to that radio button on submit without using javascript?

Answer 1

I don't believe the HTML spec supports this, no. You'd just have to have your processing code look at the radio button, see that the value is 'other', and go get a value from the text field's input (the 'other' var in the form submission instead of the 'candidate' var).

Answer 2

No - this isn't supported by the HTML specifications. You'd either need to do it via javascript before the form is submitted, or better still, check if the radio button is set to "other" and then read the textbox value AFTER the form is submitted.

One reason you don't want to really mess around with altering the return value of the "other" radio button is what if I was to type "option1" in your text box?

Answer 3

No. This requires dynamic updates to the DOM, which requires javascript.

Answer 4

If 'Other' is selected, you would want to submit only the value in the text field, it does not make sense to feed that into the radio and pass that to the server. You could give the value of the 'Other' radio the empty string, e.g.:

<label><input type="radio" name="candidate" value="">OTHER</label>

And on the server if no value is present in "candidate" look to "other".