By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,952 Members | 1,376 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,952 IT Pros & Developers. It's quick & easy.

RadioButtonList - OnClick Issue

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

<table id="optMedTreatment"
onClick="SetFocusDayPhone(document.getElementsByNa me('optMedTreatment'))">
<tr>
<td><input id="optMedTreatment_0" type="radio" name="optMedTreatment"
value="Yes" /><label for="optMedTreatment_0">Yes</label></td>
</tr><tr>
<td><input id="optMedTreatment_1" type="radio" name="optMedTreatment"
value="No" /><label for="optMedTreatment_1">No</label></td>
</tr>
</table>

function SetFocusDayPhone(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.

Jan 24 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
di**********@gmail.com wrote:
OK, I am checking the values of a radiobuttonlist with 2 values (Yes
and No) using javascript:

<table id="optMedTreatment"
onClick="SetFocusDayPhone(document.getElementsByNa me('optMedTreatment'))">
If you put the radio buttons in a form, you can use:

<form action=""
onclick="SetFocusDayPhone(this.optMedTreatment);">
<table id="optMedTreatment">
...
</table>
</form>
Which is shorter and more widely supported than getElementsByName. The
difference is that getElementsByName 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 "optMedTreatment").

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.

<tr>
<td><input id="optMedTreatment_0" type="radio" name="optMedTreatment"
value="Yes" /><label for="optMedTreatment_0">Yes</label></td>
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.

</tr><tr>
<td><input id="optMedTreatment_1" type="radio" name="optMedTreatment"
value="No" /><label for="optMedTreatment_1">No</label></td>
</tr>
</table>

function SetFocusDayPhone(e) {

var SelectedValue="";
Variables with a capital letter as the first character are normally
constructors, not simple local variables.

var i=0;

for (i=0; i<=e.length; i++)
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)

{
if (e[i].checked)
{
SelectedValue=e[i].value;
if (SelectedValue == "No")
{
alert("Hell Yeah");
break;
};
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.

};
};
}

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?
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="optMedTreatment_1" type="radio" name="optMedTreatment"
value="No"
onclick="SetFocusDayPhone(this);">
Then the function is simply:

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


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.


That is from the erroneous use of "i<=e.length" above.
--
Rob
Jan 24 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.