Using the OnFocus event between form fields.

[HoserDave]

I have a form containing 3 radio options. The 2nd radio option has a single select dropdown attached to it. I'm trying to get radio option #2 to become selected if the user touches the dropdown list associated with it. Checked defaults to option 1 on the page load.

What I have is returning "not an object" error:

<SCRIPT LANGUAGE="Javascript">
function setRadioOption(){
document.myform.radioName.options[1].checked
}
</SCRIPT>

<form name="myform" method="get" action="mypage">
<input type="radio" name="radioName" value="v1"><br/>
<input type="radio" name="radioName" value="v2">
<select name="selectID" onFocus="setRadioOption()">
<option value="value1">Value 1</option>
</select><br/>
<input type="radio" name="radioName" value="v3"><br/>
</form>

Does anyone see what's wrong here? When the user first loads the page it defaults to radio option 1 as checked. I need radio 2 to become selected if the user clicks the dropdown attached to it. Thanks in advance.

[cmarshall]

You had some basic JavaScript formatting errors.

1) Don't rely on names. Always assign IDs, and then use document.getElementById() to find that element.

2) Your Javascript did nothing. It merely mentioned a property (that was bogus anyway because of #1).

3) Always use XML-compliant naming (lowercase), use "type," not "language," and also use CDATA comments. They can get validators and browsers to interpret the JavaScript a bit differently (A fact I just found out. I've always used them 'because').

Try this:

<script type="text/javascript">
// <![CDATA[
function setRadioOption(){
document.getElementById('my_target').checked = true;
}
// ]]>
</script>

<form id="myform" method="get" action="mypage">
<input type="radio" name="radioName" value="v1" checked="checked" /><br/>
<input id="my_target" type="radio" name="radioName" value="v2" />
<select name="selectID" onFocus="setRadioOption()">
<option value="value1">Value 1</option>
</select><br/>
<input type="radio" name="radioName" value="v3" /><br/>
</form>