in external javascript file calling a asp textbox control is not working in master page.
for eg this is my code in external js file

 function name_valid()
 {
  var a=document.getElementById("name_box");
  if(a==null || a=="")
  {
   alert('Enter the name');
  }

  var b=document.getElementById("dob_box");
  if( b==null || b=="")
  {
   alert('Enter the Date Of Birth');

  }
 }

content page: content place holder(head):

<script  src="valid.js" type="text/javascript" language="javascript"  ></script>

contentplaceholder1:

<asp:TextBox ID="name_box" runat="server" ></asp:TextBox>

<asp:Textbox Id="dob_box" runat="server"></asp:TextBox>
<asp:Button ID="submit_button" runat="server" Text="Submit" OnClientClick="name_valid()"/>

here javascript executes either the name textbox is empty or some name is entered in it kindly help me to solve this problem

in external javascript file calling a asp textbox control is not working in master page.
for eg this is my code in external js file

 function name_valid()
 {
  var a=document.getElementById("name_box");
  if(a==null || a=="")
  {
   alert('Enter the name');
  }

  var b=document.getElementById("dob_box");
  if( b==null || b=="")
  {
   alert('Enter the Date Of Birth');

  }
 }

content page: content place holder(head):

<script  src="valid.js" type="text/javascript" language="javascript"  ></script>

contentplaceholder1:

<asp:TextBox ID="name_box" runat="server" ></asp:TextBox>

<asp:Textbox Id="dob_box" runat="server"></asp:TextBox>
<asp:Button ID="submit_button" runat="server" Text="Submit" OnClientClick="name_valid()"/>

here javascript executes either the name textbox is empty or some name is entered in it kindly help me to solve this problem

• javascript

• There is a error in your javascript code, because the variable a is not defined, just let you know. – Fong-Wan Chau Commented Jan 9, 2012 at 19:32

5 Answers 5

Make sure your JavaScript file is loaded after your HTML. It could be that your JavaScript is trying to reference the ID before it exists in the page.

Or make sure the JavaScript executes after the document is ready. If you aren't using a library you should look into how jQuery does it.

Don't forget to close your js tag with </script>

First, you didn't state var a.

Did you tried to put this function in your page to test it ?

content place holder(head):

<script type="text/javascript" language="javascript">
       // your function
</script>

Last thing, not shure with your ASP code, but I don't think that document.getElementById("dob_box"); will return the value of the input, use document.getElementById("dob_box").value; instead.

// Edit :

It seems that with your ASP script the name (and/or id) of the inputs are changed, with something like that :

do_box >> ctl00_ContentPlaceHolder_do_box

You may know the real name/id inputs generated to test them. So you should do something like that to know them :

function name_valid()
{
    var values=null;
    for(id in document.forms[0].elements)
    {
        realName=document.forms[0].elements[id].name;
        realId=document.forms[0].elements[id].id;
        value=document.forms[0].elements[id].value;
        values+=id+' : '+realId+' : '+realName+' : '+value+'\n';
    }
    alert(values);      
}

Even i had the same problem while getting the master page control id from external javascript...

Atlast i could be able to get the solution after lot of trial and errors...

Here is my code.

In .aspx page,

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">                          
    <script type="text/javascript" language="javascript" src="Scripts/JScript.js">
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" Runat="Server">
    <asp:TextBox ID="txtEmployeeNumber" runat="server" ClientIDMode="Static">
    </asp:TextBox>
</asp:Content>

After adding the controls, run your page and see the view source... check the form id in that View Source.

my form id is ctl01

In JScript.js, call the textbox id like this

var txtEmployeeNumber = document.forms.ctl01.elements.ctl00$BodyContent$txtEmployeeNumber.value;

i tested this and working really fine.

Hope this helps you...

To get control id placed inside content page

var name= document.getElementById("<%=myControlname.ClientID%>";)

I ran into this problem myself. I had an error message in the console that read:

"TypeError: document.getElementById(...) is null" 

Do you have this error? If so your page hasnt generated the HTML yet and you need to place your JS link after the HTML.

PS: I would have just mented this under Seth's answer but I do not have enough reputation points on this site. Sorry Stack Overflow :(