RadioButtonList - OnClick Issue

[dickson.matt@gmail.com]

OK, I am checking the values of a radiobuttonlist with 2 values (Yes
and No) using javascript:

<table id="optMedTreat ment"
onClick="SetFoc usDayPhone(docu ment.getElement sByName('optMed Treatment'))">
<tr>
<td><input id="optMedTreat ment_0" type="radio" name="optMedTre atment"
value="Yes" /><label for="optMedTrea tment_0">Yes</label></td>
</tr><tr>
<td><input id="optMedTreat ment_1" type="radio" name="optMedTre atment"
value="No" /><label for="optMedTrea tment_1">No</label></td>
</tr>
</table>

function SetFocusDayPhon e(e) {

var SelectedValue=" ";
var i=0;

for (i=0; i<=e.length; i++)
{
if (e[i].checked)
{
SelectedValue=e[i].value;
if (SelectedValue == "No")
{
alert("Hell Yeah");
break;
};
};
};
}

I am having 2 issues:

1. When I initially come to the page and check the No option I get the
Hell Yeah message. If I initially come in and check the Yes option I
don't get the message. The problem is that if I check No, get the
message, then check Yes, I still get the message. The javascript is
firing before the value has been changed. How do I get around this?

2. I am getting a error on my page when I check the yes option, this
does not happen when I check the No option as long as it is selected
first (i.e. if the yes is selected and then the No I still get the
error). Error Message is: 'checked' is null or not an object.

[RobG]

Re: RadioButtonList - OnClick Issue

dickson.matt@gm ail.com wrote:[color=blue]
> OK, I am checking the values of a radiobuttonlist with 2 values (Yes
> and No) using javascript:
>
> <table id="optMedTreat ment"
> onClick="SetFoc usDayPhone(docu ment.getElement sByName('optMed Treatment'))">[/color]

If you put the radio buttons in a form, you can use:

<form action=""
onclick="SetFoc usDayPhone(this .optMedTreatmen t);">
<table id="optMedTreat ment">
...
</table>
</form>


Which is shorter and more widely supported than getElementsByNa me. The
difference is that getElementsByNa me will *always* return a nodeList,
whereas getting references using the forms collection may return a
nodeList (as in this case) or a single element (say if there was only
one radio button named "optMedTreatmen t").

The problem with putting the onclick on the form or table is that a
click *anywhere* on either of them will cause the onclick to fire. If
'No' is checked, you will get the message wherever you click on the form
or table.

[color=blue]
> <tr>
> <td><input id="optMedTreat ment_0" type="radio" name="optMedTre atment"
> value="Yes" /><label for="optMedTrea tment_0">Yes</label></td>[/color]

Please don't use tabs when posting code, use two (preferred) or four
spaces for indenting and block code properly to make life easier for
those who might wish to help.

[color=blue]
> </tr><tr>
> <td><input id="optMedTreat ment_1" type="radio" name="optMedTre atment"
> value="No" /><label for="optMedTrea tment_1">No</label></td>
> </tr>
> </table>
>
> function SetFocusDayPhon e(e) {
>
> var SelectedValue=" ";[/color]

Variables with a capital letter as the first character are normally
constructors, not simple local variables.

[color=blue]
> var i=0;
>
> for (i=0; i<=e.length; i++)[/color]

e is a nodeList, its length is always one more than the highest index.
Here the length is 2, the highest index is 1. If the 'break' doesn't
end execution (i.e. when neither radio button is checked), when you try
to evaluate e[2] below, you get an error because you are trying to find
the checked property of an element that doesn't exist.

It is also normal to declare variables inside the for statement rather
than outside:

for (var i=0; i<e.length; ++i)

[color=blue]
> {
> if (e[i].checked)
> {
> SelectedValue=e[i].value;
> if (SelectedValue == "No")
> {
> alert("Hell Yeah");
> break;
> };[/color]

Don't put semi-colons after the closing brace of an 'if' block, it is
evaluated as an empty statement. It won't cause errors, it's just a bit
ugly.

[color=blue]
> };
> };
> }
>
> I am having 2 issues:
>
> 1. When I initially come to the page and check the No option I get the
> Hell Yeah message. If I initially come in and check the Yes option I
> don't get the message. The problem is that if I check No, get the
> message, then check Yes, I still get the message. The javascript is
> firing before the value has been changed. How do I get around this?[/color]

You have put the onclick on the table, not the element that you really
want to check. Why not just put the onclick on the 'no' button? Then
you have:

<input id="optMedTreat ment_1" type="radio" name="optMedTre atment"
value="No"
onclick="SetFoc usDayPhone(this );">


Then the function is simply:

function SetFocusDayPhon e(el)
{
// el is a reference to the 'No' radio button
if (el.checked){
// 'No' is checked, do stuff
}
}

[color=blue]
>
> 2. I am getting a error on my page when I check the yes option, this
> does not happen when I check the No option as long as it is selected
> first (i.e. if the yes is selected and then the No I still get the
> error). Error Message is: 'checked' is null or not an object.[/color]

That is from the erroneous use of "i<=e.lengt h" above.


--
Rob