Cannot detect radiobutton

[iaswnidou]

Hello

I have a radiobutton declared as:

<asp:radiobutton id="rdbWeek" runat="server" Text="Weekly" TextAlign="Right" GroupName="rent" Enabled="False"></asp:radiobutton>

and i am trying to reference it with a variable. So far i have tried the following unsuccesfully:

var radio1 = document.getElementById('rdbWeek');

var radio1 = document.forms[0].rdbWeek;

var radio1 = document.all['rdbWeek']

Could you tell me why?

thanks

 

[MrGrey]

If you view the source you will notice the id is not 'rdbWeek' but something like 'xxxx_xxxx_rdbWeek' as .net writes a bunch of stuff in there.

You will need to reference a different way - either by pasting in this rendered value (which is not very nice) or using the DOM.

 

[BillyRayPreachersSon]

Is that radio button code the client-side code you see when you do a "view source" in your browser? If not, you'd need to show us that instead.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[MrGrey]

That code is a .net control.

 

[iaswnidou]

I have the radiobuttons in a HTML table. Here is the source after the page loads:

<span disabled="disabled"><input id="rdbWeek" type="radio" name="rent" value="rdbWeek" disabled="disabled" /><label for="rdbWeek">Weekly</label></span>

and this is what i try to do:

function EnableRadioList()
{
	var radioWeek = document.forms[0].elements['rdbWeek'];
	var radioMonth = document.forms[0].elements['rdbMonth'];
	var text = document.getElementById('txtRent').value;
		
	if (text.length > 0)
	{
		radioWeek.disabled = false;
		radioMonth.disabled = false;
	}
	else
	{
		radioWeek.disabled = true;
		radioMonth.disabled = true;
		radioWeek.checked = false;
		radioMonth.checked = false;
	}
}

I am calling this javascript from a textbox:

<asp:textbox onkeypress="return keyRestrict(event,'1234567890')" id="txtRent" onkeyup="EnableRadioList()" runat="server"></asp:textbox>

 

[iaswnidou]

The weird thing is later in the code when i try to save some data from the form. If none of the radiobuttons are selected then i have another javascript that cancels the postback.
This javascript should check if the radios are enabled first and then do the rest, but it fails.

var radioWeek = document.forms[0].elements['rdbWeek'];
	var radioMonth = document.forms[0].elements['rdbMonth'];
	if (radioWeek.disabled == false)
	{
		if (!radioWeek.checked && !radioMonth.checked)
		{
			alert("Select weekly or monthly rent to continue."); 
		}
	}

although the radios are disabled, i still see the alert!

 

[iaswnidou]

If i replace the server controls with HTML ones the javascript will work fine by the way...

 

[BillyRayPreachersSon]

How many radios in that group are there? If more than one (which presumably there will be, otherwise it's pretty pointless having radio buttons), then you need to refer to the radio button index, too:

if (!radioWeek[!][0][/!].disabled) {

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[iaswnidou]

What i want to do is this: Enter a value in the textbox and on key up event enable the radiobuttons.

As i saw in the source of the page, when i have the radios enabled by default (setting their property) then there is span that surrounds them with a "disabled" property. Maybe this is the cause of the problem?

 

[BillyRayPreachersSon]

That should not stop you programatically altering the state of the radios, AFAIK. However, why don't you change it and find out?

Can you confirm whether you have [!]one[/!], or [!]more than one[/!] radio button in the set?

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[iaswnidou]

2 radiobuttons

if in the body tag i say this

onload="document.forms[0].elements['rdbWeek'].disabled = true;document.forms[0].elements['rdbMonth'].disabled = true;"

they get disabled and then the script works fine. If however i set the enabled property to false, the javascript dont work...it's driving me crazy.

if on the onload script i wrote above add a check (if the textbox's value is > 0) then the javascript dont work again.

 

[BillyRayPreachersSon]

2 radiobuttons

Excellent. I suggest you go back and re-read my posts - I've given you the solution, and told you why your code isn't working.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[iaswnidou]

I have referenced both radiobuttons as

var radioWeek = document.forms[0].elements['rdbWeek'];
	var radioMonth = document.forms[0].elements['rdbMonth'];

So you're saying that i cannot access their properties as "radioWeek.something"?

The groupname is called "rent". Should i say instead?

var rent[0]= document.forms[0].elements['rdbWeek'];
var rent[1]= document.forms[0].elements['rdbMonth'];

 

[BillyRayPreachersSon]

When I referred to the radio "group", I mean how many radio buttons in the same form with the same name. If you have multiple radio buttons with the same name, you have more than one button in the group. If you have 2 radio buttons, but they have different names, they are not grouped.

Do yours have the same name in the HTML?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[MrGrey]

He has 2 radio buttons with the ids of 'rdbWeek' and 'rdbMonth' that are both named 'rent'.

 

[BillyRayPreachersSon]

In which case, this should work, assuming the form is the first form on the page:

var radios = document.forms[0].elements['rent'];
alert('Is the first radio button checked?: ' + radios[0].checked);
alert('Is the second radio button checked?: ' + radios[1].checked);

If that works, then you should be able to set them using the same properties.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[iaswnidou]

My original problem was that if i have the ASP.NET radiobuttons disabled by default, then I cannot enable through Javascript using the onkeyup event of a textbox.

So i added a script on the body tag of the page:

<body MS_POSITIONING="GridLayout" onload="OnLoadToggle()">

function OnLoadToggle()
{
	var radios = document.forms[0].elements['rent'];
	var textbox = document.forms[0].elements['txtRent'];

	if ((textbox.disabled == true) && (textbox.value.length > 0))
	{
		radios[0].disabled = true;
		radios[1].disabled = true;
	}
	else if (textbox.value.length == 0)
	{
		radios[0].disabled = true;
		radios[1].disabled = true;
		radios[0].checked = false;
		radios[1].checked = false;
	}
	else if ((textbox.disabled == false) && (textbox.value.length > 0))
	{
		radios[0].disabled = false;
		radios[1].disabled = false;
	}
}

Now the radiobuttons come up disabled and I can enable through Javascript. So it only works if disable and enable with scripting. When i see the source in this case there is no "span" surrounding the "inputs". When i disable them through the designer there is and i think that's where the problem lies.