javascript and asp.net web user controls

Question

I have a web user control that generates the following html on the client.

I want to reference a specific RadioButton control using JavaScript.

I am not sure how to do this as the RadioButton ID is generated by asp.net.

For example I give the RadioButton ID = 1_RadioButton

asp.net generates an ID = ctl00_ContentPlaceHolder1_Material_1_RadioButton

how can this javascript code find Radio Button controls?

    <script type="text/javascript">
        $(document).ready(function() {
            if (document.getElementById("1_RadioButton").checked) {
                $("#1_other").hide();
            }
        });    
    </script>

The following is what asp.net generates for the client.

    <input id="ctl00_ContentPlaceHolder1_Material_1_RadioButton" type="radio" name="ctl00$ContentPlaceHolder1$Material$Academic" value="1_RadioButton" onclick="javascript:$('#1_other').show('fast');" />

    <label for="ctl00_ContentPlaceHolder1_Material_1_RadioButton">Yes</label>

    <input id="ctl00_ContentPlaceHolder1_Material_2_RadioButton" type="radio" name="ctl00$ContentPlaceHolder1$Material$Academic" value="2_RadioButton" checked="checked" onclick="javascript:$('#1_other').hide('fast');" />

    <label for="ctl00_ContentPlaceHolder1_Material_2_RadioButton">No</label>

    <input id="ctl00_ContentPlaceHolder1_Material_3_RadioButton" type="radio" name="ctl00$ContentPlaceHolder1$Material$Academic" value="3_RadioButton" onclick="javascript:$('#1_other').hide('fast');" />

    <label for="ctl00_ContentPlaceHolder1_Material_3_RadioButton">Uncertain</label>

    <div id='1_other'>
         <input name="ctl00$ContentPlaceHolder1$Material$4_TextBox" type="text" value="bbb chabng" id="ctl00_ContentPlaceHolder1_Material_4_TextBox" />
   </div>

Answer 1

var radioButton = document.getElementById("<%= 1_RadioButton.ClientID %>");

And then go from there. Note - I'm not positive about the quotation marks.

Answer 2

If that code is in the .aspx file use <%= MyRadioButton.ClientID %> in its place and the ASP.NET rendering engine will properly render the ID for you.

Update: For example:

<script type="text/javascript">
    $(document).ready(function() {
        if ($get("<%= MyRadioButton.ClientID %>").checked) {
            $("#1_other").hide();
        }
    });    
</script>

Answer 3

Very simple just set the clientidmode of the web control to static (clientidmode="static") and you can be sure that asp.net will keep your ID as seen in the designer UI.

Answer 4

I had written a blog post on how to do this:

So say you have a label control on your page:

The generated output of the html and the ID of that control might look like this:

<span id="ctl00_ContentPlaceHolder1_Label1"></span>

Unfortunately the generated ID of ct100_ContentPlaceHolder1_Label1 isn't always going to be the same from build to build. So trying to select it like this:

$("#ct100_ContentPlaceHolder1_Label1").hide();

will eventually break and it won't hide the label control.

The trick is to use ASP.NET inside the jQuery selector. Label1.ClientID will return the generated ID everytime. We combine ASP.NET and jQuery into one line like this:

$("#<%= Label1.ClientID %>").hide();

This will get the generated ID of the Label control everytime.