Javascript to access control in MasterPage

Question

I have a textbox control Super1 in my MasterPage.

I am using javascript to access this control from my content page like this:

<asp:Content ID="ContentPage" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
    function Somethin() {
        {
            document.forms[0].elements['Super1'].value = "sdfsd";
            //document.getElementById('<%=Super1.ClientID%>').value = "sdfsdf";                
        }
    }
</script>
</asp:Content>

But while page load it says Super1 not found. How can I access Super1?

Answer 1

You have to make sure the document has loaded, make sure to call your functions that rely on the DOM being loaded onload. E.g.:

<script type="text/javascript">
window.onload = function() {
  Somethin();
}
</script>

Answer 2

In your masterpage's onload add this code :

string script = @"<script>
function Somethin() {
        document.getElementById('" + Super1.ClientID + @"').value = 'sdfsd';               
}

Somethin();
</script>";
if (!Page.ClientScript.IsClientScriptBlockRegistered("somethin_script_block"))
{
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "somethin_script_block", script);
}

this will add your script to the end of the page.

EDIT : I just realized, you use your controls ID directly in your javascript code. this may cause the exception. I update your code to fix it.

I hope this helps.

Answer 3

From the sample code you posted and since you said you are using a control, check the rendered id of the control you are trying to get at. In my experience the name is something crazy like ctl100_masterpagename_namingcontainer_controlname... that needs to show up in the js as well.

Super1 might be in a different naming container (the masterpage's control collection). You either need to render out the clientid of the control in a global javascript variable during the masterpage rendering so it can be accessed by javascript in the child page or you need to get a reference to the Masterpage, find the control there and write out the client Id in your child pages javascript...

Something like...

if the text box is in its own content place holder

var txtSuper1 = Master.FindControl("ContentPlaceHolderName").FindControl("Super1") as Textbox;

or if its not in a content place holder var txtSuper1 = Master.FindControl("Super1") as Textbox;

3rd option might be to expose the control as a property of the masterpage (not sure) - my webforms is rusty.

Answer 4

On the master page, declare a javascript variable for the control, e.g:

<asp:TextBox id="Super1" runat="server"/>
...
<script type="text/javascript">
var txtSuper1 = document.getElementById('<%= Super1.ClientID %>');
</script>

It's important that you use the ClientID property, because the rendered control's ID (on the client) will be different from the server control's ID (due to naming containers).

Now you can access the textbox from javascript declared in the content pages:

<asp:Content ID="ContentPage" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
function Somethin()
{
  txtSuper1.value = "sdfsd";
}
</script>
<a href="javascript:Somethin()">click me</a>
</asp:Content>

BTW: in your code there are duplicate curly-braces in function Somethin() {{ ... }}