RadioButtonList - OnClick Issue

D

dickson.matt

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

<table id="optMedTreatment"
onClick="SetFocusDayPhone(document.getElementsByName('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.checked)
{
SelectedValue=e.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.
 
R

RobG

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

<table id="optMedTreatment"
onClick="SetFocusDayPhone(document.getElementsByName('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.checked)
{
SelectedValue=e.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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top