How to make radio box be selected when user enters accompanying text.

September 12, 2006 11:44 AM

In a web survey form, I need to automatically check a radio box if the user clicks on the text field.

I have a questionnaire with "Other (please specify)" as a radio option, with a text field next to it. I would like to have the radio button automatically selected if the user decides to just type a name in the text field and ignoring the radio box. I saw a javascript that checks the radio button, however you can't type into the accompanying text field...






I'm not that great at javascript. Help!

posted by Blue Buddha to computers & internet (9 comments total)

Er, I guess you can't have forms in posts (where that empty space is). You can check the javascript, slightly modified, here.
posted by Blue Buddha at 11:46 AM on September 12, 2006

What you'll want to do is handle the onClick, onChange, or the onFocus event (depending on the desired behavior) of the text field and use the handler to modify the value of the radio button. Actually, you probably want to use the onChange event because if the user is navigating using a keyboard, you don't want the other events to fire and invalidate his/her answer when it navigates through the "Other" field.

This site is helpful.
posted by apark at 11:53 AM on September 12, 2006

Thanks apark! I changed the onFocys to onChange and that did the trick when going to the next question.
posted by Blue Buddha at 12:06 PM on September 12, 2006

< script text/javascript>
function setRadio()
{
document.getElementById("Cheese").checked=true
}
< /script>

< input radio name="group1" id="Butter" value="Butter" checked> Butter

< input radio name="group1" id="Cheese" value="Cheese"> Cheese

< input 'text' name="other" setradio(); />
posted by darkpony at 12:07 PM on September 12, 2006

The first example in the link you gave would work; just take out the "blur," which removes the focus from the form element (which obviously would prevent you from ever typing anything there):

<INPUT TYPE="TEXT" onFocus="document.formName.radiobutton.checked=true">
posted by Doofus Magoo at 12:08 PM on September 12, 2006

shoot something got lost in the input:
onfocus = ' setradio();'
posted by darkpony at 12:08 PM on September 12, 2006

You're welcome!
posted by apark at 1:00 PM on September 12, 2006

Two points:

1. if it's a button all by itself, which simply registers yes or no, then it should be a checkbox not a radio button -- radios are for mutually-exclusive options
2. what's the point of this? If the test is simply "is there anything in the text box or not" you don't need a separate checkbox, do you? You just need a check for content in the text box.

posted by AmbroseChapel at 2:52 PM on September 12, 2006

Ambrose, see the original poster's question for an explanation of the use case (a set of radio buttons, one of which has an associated text field).
posted by mbrubeck at 5:29 PM on September 12, 2006