id and name attributes of HTML elements manipulated by ASP.NET

Question

I have a problem in my C# ASP.NET application, where the id and name tags are modified at runtime with a prefix "MainView_" and "MainView$" respectively. So my code:

<asp:Button ID="OKToContinueCheckInButton" runat="server" CausesValidation="False" Visibility="false" Style="display: none" OnClick="btnOKToContinueCheckIn" />

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById('OKToContinueCheckInButton').click();
// -->
</script> 

becomes:

<input type="submit" name="MainView$OKToContinueCheckInButton" value="" id="MainView_OKToContinueCheckInButton" Visibility="false" style="display: none" />

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById('OKToContinueCheckInButton').click();
// -->
</script>

getElementID() returns null because the name has changed. Can anyone tell me why this occurs and if there is a way to possibly disable it from changing the id and name values. Thanks!

-Sephrial

Answer 1

I think this would help you...

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById('<%= OKToContinueCheckInButton.ClientID %>').click();
// -->
</script>

This is the part that does the trick

<%= OKToContinueCheckInButton.ClientID %>

Answer 2

This is a fundamental part of the way the Asp .Net Forms model work.

The IDs are changed so that you don't have to worry about keeping IDs unique across user controls, custom controls, repeaters etc.

You can use Cyril's method. I also find JQuery suits this model very well to because you can easily reference controls by their class or position in the document.