asp.net控件值无法传递给javascript函数

Question

My Question is : asp.net controls value not pass to javascript function

Asp.Net Code

<asp:TextBox ID="txtsubcategorycodeid" class="form-control " runat="server" placeholder="Sub Category Code ID"></asp:TextBox>
<asp:TextBox ID="txtsubcategoryname" class="form-control " runat="server" Height="25px" placeholder="Sub CategoryName In Letter"></asp:TextBox>
<asp:DropDownList ID="ddcategorycodeid" runat="server">
<asp:ListItem>---Select---</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddstatus" runat="server">
<asp:ListItem>---Select---</asp:ListItem>
<asp:ListItem>Active</asp:ListItem>
<asp:ListItem>In-Active</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnSave3" runat="server" Text="Button" OnClientClick="return btnSave3_onclick()" />

JavaScript Code

var txtsubcategorycodeid = $("#txtsubcategorycodeid").val();
var txtsubcategoryname = $("#txtsubcategoryname").val();
var ddcategorycodeid = $("#ddcategorycodeid").val();
var ddstatus = $("#ddstatus").val();

When I call it it display Undefined

This Code Work in Simple Form, But not work with integration on template and I put this code to integrated Template. It will Not Work.

    This Asp.Net Code in content placeholder. 
    If I use input html control then its works.

Answer 1

If you are using version ASP.NET 4 or greater then you can add ClientIDMode attribute to your controls which will not change your ids like this:-

<asp:TextBox ID="txtsubcategorycodeid" class="form-control " runat="server" 
     placeholder="Sub Category Code ID" ClientIDMode="Static" ></asp:TextBox>

In this case you will get the correct result if you execute this:-

var txtsubcategorycodeid = $("#txtsubcategorycodeid").val();

If you have a lower version of ASP.NET (<4) the you can use the ClientID property to fetch the actual ID being rendered like this:-

var txtsubcategorycodeid = $("#<%= txtsubcategorycodeid.ClientID %>").val();