Access content page elements from jquery

Question

I am trying to access the value of a textbox and Hidden field from jquery. I am getting value as undefined.

These controls are inside the content page of my master page.

 <input id="datepickerContact" type="text" runat="server" />
<input type="hidden" runat="server" id="IAssignmentId" clientidmode="Static" />

In the javascript function :

 var Insid = $("#datepickerContact");
    var firstcontactDate = $("#IAssignmentId");
    alert(Insid.val());
    alert(firstcontactDate.val());

Thanks in advance

BB

Answer 1

You haven't mentioned the ClientIDMode for datepickerContact control. By default, the mode would be Predicatable (or AutoID if a migrated site) and it will generate the html side id using concatenation of parent naming container which will be content placeholder in case of content pages.

In short, datepickerContact textbox will have html id attribute as something similar to "content1_datepickerContact" and hence jquery selector would not find the html control.

The simple solution is to use ClientIDMode as static. For example,

<input id="datepickerContact" type="text" runat="server" ClientIDMode="Static" />

Yet another way is to pass the actual client id (irrespective of client id mode) obtained via ClientID property to your java-script function. If your function is defined on the markup (aspx) then you can use server side directive to embed client id in script as illustrated by rick schott. If your function lies in external js then you have to pass the client id as parameter.

Answer 2

$(document).ready(function() {
    var Insid = $("#<%= datepickerContact.ClientID %>");
    var firstcontactDate = $("#IAssignmentId");
    alert(Insid.val());
    alert(firstcontactDate.val());
});

Answer 3

you can access by writing this

var insid=$("#<%= datepickerContact.ClientID %>").val();
alert(insid);