PDA

Click to See Complete Forum and Search --> : [RESOLVED] Enable/Disable asp.net radio by javascript

JonnyPoet
December 15th, 2008, 05:41 PM
Hi frends !
I must confess this is my second day to use any javy script code and it confuses me a bit as it seems a bit similar to c# but is totally different in lots of points.
For example I'm missing declaration of input values in methods. My actual problem is to find the needed access to an asp.net radiobutton control using clientside code
I did for a RadioButton where the ID is "radio1"

var tbx = document.getElementById("radio1");
tbx.disabled = true;
This disabled /enabled the button itself depending on if I set disabled to true or false but didn't disable the text of the control only the button.
Using Postback and Enabled Property of this asp.net Radiobutton I can easily enabe /disable the whole control within its text but not using this code in javascript. So how to get access to the whole control ?:confused:
PeejAvery
December 15th, 2008, 11:41 PM
You would have to also disable the textbox by getting its ID.

document.getElementById('RADIO_ID').disabled = true;
document.getElementById('TEXTBOX_ID').disabled = true;
Thread1
December 16th, 2008, 01:47 AM
you may use the control's ClientID property when in client-side..

document.getElementById('<%=myTextBox.ClientID%>').disabled = true;

hth
JonnyPoet
December 16th, 2008, 03:04 AM
You would have to also disable the textbox by getting its ID.

document.getElementById('RADIO_ID').disabled = true;
document.getElementById('TEXTBOX_ID').disabled = true;Yes, Ok, but my problem is which ID has the Text of an asp.net Radiobutton ? The whole control has an ID "Radio1"... and so on. So whats the ID of its Text ? Is the Text a child of the radio Button ? The design is a list the user can fill and depending on some checkboxes some Radiobuttons needs to be enabled / disabled. And all this should be done on clientside.

Or do I need to have the Radiobuttons Textfields empty and adding additional Labels and changing TextColor there ? Would be really a complicated solution for that ;)
JonnyPoet
December 16th, 2008, 03:27 AM
you may use the control's ClientID property when in client-side..

document.getElementById('<%=myTextBox.ClientID%>').disabled = true;

hthSorry I'm too much new I dont understand what you are talking about. Lets assume This are my Radios
<script language="javascript" >
function ChangeRadioState(which,disable){
var tbx = document.getElementById(which);
tbx.disabled = disable;
}

</script>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButton ID="Radio1" runat="server" Text="Hallo" /><br/>
<asp:RadioButton ID="Radio2" runat="server" Text="World" /><br/>
<asp:RadioButton ID="Radio3" runat="server" Text="I'm here" /><br/>
<asp:CheckBox ID="CheckBox1" runat="server" Text= "Disable Radio1" onclick="ChangeRadioState('Radio1',true)"/><br/>
<asp:CheckBox ID="CheckBox2" runat="server" Text= "Disable Radio1" onclick="ChangeRadioState('Radio1',false)"/></div>
</form>
</body>
And when I'm disabling "Radio1" then also the Text which is "Hallo" in this example should look disabled. Just if I'm disabling it using Postback and setting the property of asp.net Control "Radio1" to Enabled="False"

What is 'myTextBox' in your code in this case ?
Thread1
December 16th, 2008, 04:38 AM
the ID of the element in your aspx file is not necessarily the ID in javascript, but rather the ID of your server control. ASP.NET assigns its own ID for every element in the page, and this ID which is stored in ClientID property is the one used when the page is rendered to the client (javascript). you can verify this by looking at the "View Source" output of your browser.


"myTextBox" is an ID of a textbox control which is similar to "Radio1" in your example, if you want to disable "Radio1" in javascript it could be


document.getElementById("<%=Radion1.ClientID%>").disabled = true;


hth
JonnyPoet
December 16th, 2008, 04:41 AM
Hi friends !
Using Debugger and Intellisense I found out that nextSibling seems to be the Text of the control So I did

<script language="javascript" >
function ChangeRadioState(which,disable){
var tbx = document.getElementById(which);
tbx.disabled = disable;
tbx.nextSibling.disabled = disable;
}
</script> and this seems to work. My question now is only, as I'm not familar with the asp.net controls design. Is this the standard way to do it or does this only work because of a 'lucky coincidental ' and will maybe not work if others access my page ? Or could it lead to this ugly errors which occur on lots of pages where my browser all the time asks if he should go to debug mode. :D Because I dont want to create lots of bugs on my page
Thread1
December 16th, 2008, 05:03 AM
and this seems to work. My question now is only, as I'm not familar with the asp.net controls design. Is this the standard way to do it or does this only work because of a 'lucky coincidental ' and will maybe not work if others access my page ? Or could it lead to this ugly errors which occur on lots of pages where my browser all the time asks if he should go to debug mode. :D Because I dont want to create lots of bugs on my page


:D i think you should test it for different browser (i.e., firefox, opera, etc) though for i had encounter such thing that just because of an extra whitespace the "nextSibling" was affected.
Xeel
December 16th, 2008, 01:10 PM
to avoid any problems I'd recommend using el.disabled="disabled" variant in js. This one works in all browsers.
JonnyPoet
December 16th, 2008, 01:28 PM
to avoid any problems I'd recommend using el.disabled="disabled" variant in js. This one works in all browsers.
And what is el in your code ? ( which I sined in red )
As you see I have a lot of radio buttons to enable / disable so I want to access them all with one method only using different input values. Look at the example and code I gave. I didn't want to explicitly write
Radio1.disabled= true;
Radio2.disabled = true;
....
Radio27.disabled = true;
The full page is a relatively long questionary and depending on some answers further questions should be enabled or if they are not relevant anymore because of a given result in a former checkbox they should be disabled. For example if someone has answered he is a man its unnecessary to ask him if he ever has been pregnant :lol: and if yes how often. This is only an example, the questionary has a totally technical background ) But its simple a sort of multichoice.
I would hate it to have a postback after each click a user does to any checkbox or radiobutton.
PeejAvery
December 16th, 2008, 03:29 PM
el is the common reference to an HTML element. In this case, it would be the object returned by document.getElementById().
JonnyPoet
December 16th, 2008, 04:16 PM
to avoid any problems I'd recommend using el.disabled="disabled" variant in js. This one works in all browsers.If I'm using this 'string' version how do I enable the button again ? I tried el.disabled="enabled" but this didn't work, while true and false works in my IE7 Browser. You say using sting works in every browser so I would use this but how to correctly set it to enabled ( using an empty string like "" works but is this the correct method. Sorry I'm a totally newbie in javascript and some of this javascript syntax is really against all what I have learned in C# about type and typesave coding. :D So as I can see el in my Intellisence it obviously doesn't need to be declared. So I changed my code as followedfunction ChangeGroupState(gpCount, gpElement, disable) {
for (i = 1; i <= gpCount; i++) {
el = document.getElementById(gpElement + i);
if (el !=null){
if (disable) {
el.disabled = "disabled";
el.checked = false;
el.nextSibling.disabled = "disabled";
} else {
el.disabled = "";
el.nextSibling.disabled = "";
}
}
}
}
The radios have names like 'roof1' to 'roof4' or 'pos1' to 'pos6' and so on. Therefore gpElement is the basename like 'roof' or 'pos' and this way I can enable or disable a full bunch of radiobuttons. The last question regarding this is now only: Will this work in every browser or at least most of the browsers ?
PeejAvery
December 16th, 2008, 05:02 PM
It should work in all browsers. However, it is a HTML value and not an XHTML value.

Of course, there is no reason why the boolean shouldn't either. The boolean is the XHTML value.