1

I want to get the value of textbox that a user enters. Below is the code snippet of aspx page :

<asp:TextBox id="txtUserName" runat="server" />

Now which is the best way to access DOM object in aspx page

1.

<script type="text/javascript">
var value= document.getElementById(<%= txtUserName.ClientID %>).value;
alert(value);
</script>

2.

<script type="text/javascript">
var value= document.getElementById("txtUserName").value;
alert(value);
</script>
1

SharePoint 2013/SharePoint Online

In .NET Framework 4 was introduced ClientIDMode property that specifies how ASP.NET generates the ClientID for a control that can be accessed in client script.

To summarize, since SharePoint 2013 targets .NET Framework 4, ClientIDMode could be utilized that simplifies the access of control in the client side as demonstrated below:

Example:

<asp:TextBox id="boxUserName" runat="server" ClientIDMode="Static" />

JavaScript:

var boxUserName = document.getElementById("boxUserName") 

SharePoint 2010 and earlier versions

Prerequisites: jQuery library is used that offers a powerful set of tools for matching a set of elements in a document.

Option 1

Use selector to find element by Id, for example:

var quickLaunch = $('[id$=V4QuickLaunchMenu]'); // find element with id which ends with the text 'V4QuickLaunchMenu'

Option 2

Use CssClass to specify element class, for example:

<asp:TextBox id="boxUserName" runat="server" CssClass="text-box" />

and then use class selector:

var boxUserName = $('input.text-box');

References

| improve this answer | |
  • so this means if an asp element doesn't specified clientIdMode then using getElementById might fails or can generate null exception – nbi Sep 28 '14 at 16:39
  • One correction for your comment, when ClientIDMode="Static" is specified, then the element id is not changed – Vadim Gremyachev Sep 28 '14 at 17:52
0

Option 1 is the correct way to do but just change the variable name to something different as it is JavaScript keyword

<script type="text/javascript">
 var _value= document.getElementById(<%= txtUserName.ClientID %>).value;
 alert(value);
</script>

But I prefer to use jQuery which make life much easier. For that add jQuery file in your aspx or masterpage. Then use below line

<script type="text/javascript">
 $(document).ready(function(){     
   var _value= $(<%= txtUserName.ClientID %>).val();
   alert(value);
 });
</script>
| improve this answer | |
  • Thnaks but I'm facing a problem which is when I put the javascript in JS file[JS code is taken out from aspx file] I am getting null exception on accessing these element. Also can u please tell me the difference between them – nbi Sep 28 '14 at 6:04
  • Can you explain it bit more. How you are adding code and referencing to the page. – Milind Sep 28 '14 at 6:08
  • I have taken out the code from <script> tag and place it into a JS file. Now its throwing the null exception for (<%= txtUserName.ClientID %>).val() when I am trying to read value but document.getElementById("txtUserName").value; is working fine – nbi Sep 28 '14 at 10:04
  • 1
    It is correct, it will throw null as <%= %> is server side tag and it will not execute from js file as it is client side file. Next thing if you are setting ClientIDMode="Static" than it will not change id of the element, then you don't need to use server tag. Hope you got my point. – Milind Sep 28 '14 at 11:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.