title: Getting id of asp.net control in JavaScript
body: <p>I am working in an ASP.Net application and need to get the ID of some client controls.  I have tried the following but keep getting an error:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var cbDeclinedID = '&lt;%= cbDeclined.ClientID %&gt;';
  &lt;/script&gt;   
  </code></pre>
  
  <p>It does NOT matter where I put this code, I always get the error:</p>
  
  <p><strong>CS0103: The name 'cbDeclined' does not exist in the current context</strong></p>
  
  <p>The markup:</p>
  
  <pre><code>&lt;%@ Page Title="Manage Resident Meals" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ManageResidentMeals.aspx.cs" Inherits="Chart2GoWeb.WebUI.WebForms.ManageResident.ManageResidentMeals" %&gt;
  
  &lt;asp:Content ID="jsContent" ContentPlaceHolderID="JavaScriptContent" runat="server"&gt;
  
  &lt;script type="text/javascript"&gt;
  &lt;!--
      // var cbDeclinedID = '&lt; %= cbDeclined.ClientID % &gt;';
  
      function NumericOnly() { var key = window.event.keyCode; if (key &lt; 48 || key &gt; 57) window.event.returnValue = false; }
  
      $(document).ready(function () {
          function UpdateTextBoxes(isDeclined, isNOP, isOutOfFac) {
              var ddlMealReplacement = $('#ddlMealReplacement');
  
              var lblMealOld = $('#lblMealOld');
              var lblFortifiedFluidOld = $('#lblFortifiedFluidOld');
              var lblFluidOld = $('#lblFluidOld');
  
              var txtMeal = $('#txtMeal');
              var txtFluid = $('#txtFluid');
              var txtFortifiedFluid = $('#txtFortifiedFluid');
  
              var mealReplacement = '';
              if (ddlMealReplacement.length) {
                  mealReplacement = ddlMealReplacement.text();
              }
  
              if (isNOP || (isDeclined &amp;&amp; mealReplacement != 'G')) {
                  txtMeal.prop('disabled', true);
                  txtMeal.val('');
                  lblMealOld.val('___');
              } else {
                  txtMeal.prop('disabled', false);
              }
  
              // txtFluid.Enabled = !isNOP;
              txtFluid.prop('disabled', isNOP);
              // txtFortifiedFluid.Enabled = !isNOP;
              txtFortifiedFluid.prop('disabled', isNOP);
  
              if (isNOP) {
                  txtFluid.val('');
                  txtFortifiedFluid.val('');
                  $('#lblFluidTotalString').val('');
              }
          }
  
          function Total(lblFluidTotal, val1, val2) {
              var totalFluids = null;
  
              var num = parseFloat(val1);
              if (num != 'NaN')
                  totalFluids = val1Num;
  
              num = parseFloat(val2);
              if (num != 'NaN')
                  totalFluids = (totalFluids == null) ? num : num + totalFluids;
  
              if (totalFluids == null)
                  lblFluidTotal.val('___');
              else
                  lblFluidTotal.val(totalFluids);
          }
  
          $('#'+cbDeclinedID).click(function () {
              var cbDeclined = $(this);
              var cbIsOutOfFac = $('#cbIsOutOfFac');
              var cbNOP = $('#cbNOP');
  
              if (cbDeclined.is(':checked'))
                  cbIsOutOfFac.attr('checked', false);
  
              UpdateTextBoxes(cbDeclined.is(':checked'), cbNOP.is(':checked'), cbIsOutOfFac.is(':checked'));
          });
  
          $('#cbIsOutOfFac').click(function () {
              var cbDeclined = $('#cbDeclined');
              var cbIsOutOfFac = $(this);
              var cbNOP = $('#cbNOP');
  
              UpdateTextBoxes(cbDeclined.is(':checked'), cbNOP.is(':checked'), cbIsOutOfFac.is(':checked'));
          });
  
          $('#cbNOP').click(function () {
              var cbDeclined = $('#cbDeclined');
              var cbIsOutOfFac = $('#cbIsOutOfFac');
              var cbNOP = $(this);
  
              UpdateTextBoxes(cbDeclined.is(':checked'), cbNOP.is(':checked'), cbIsOutOfFac.is(':checked'));
          });
  
          $('#ddlMealReplacement').change(function () {
              var cbDeclined = $('#cbDeclined');
              var cbIsOutOfFac = $('#cbIsOutOfFac');
              var cbNOP = $('#cbNOP');
  
              UpdateTextBoxes(cbDeclined.is(':checked'), cbNOP.is(':checked'), cbIsOutOfFac.is(':checked'));
          });
  
          $('#txtFluid').change(function () {
              var txtFluid = $(this);
              var txtFortifiedFluid = $('#txtFortifiedFluid');
              var lblFluidTotal = $('#lblFluidTotal');
  
              Total(lblFluidTotal, txtFluid.val(), txtFortifiedFluid.val());
          });
  
          $('#txtFortifiedFluid').change(function () {
              var txtFluid = $('#txtFluid');
              var txtFortifiedFluid = $(this);
              var lblFluidTotal = $('#lblFluidTotal');
  
              Total(lblFluidTotal, txtFluid.val(), txtFortifiedFluid.val());
          });
      });
  
      //--&gt;
      &lt;/script&gt; 
  
  &lt;/asp:Content&gt;
  
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"&gt;
  &lt;/asp:Content&gt;
  
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"&gt;
  
      &lt;asp:ObjectDataSource ID="ResidentsMealsODS" runat="server" 
          InsertMethod="InsertNourishment"        
          SelectMethod="GetMealsDetailByResMealInTakeId" 
          TypeName="Chart2GoWeb.Domain.DAL.ResidentsMealsDAL"
          UpdateMethod="UpdateNourishment"
          &gt;
  
          &lt;SelectParameters&gt;
              &lt;asp:SessionParameter DefaultValue="" Name="session" SessionField="__MySession__" Type="Object" /&gt;
              &lt;asp:QueryStringParameter Name="resMealInTakeIdString" QueryStringField="resMealInTakeId" Type="String" /&gt;
              &lt;asp:QueryStringParameter Name="nourishment" QueryStringField="nourishmentType" Type="String" /&gt;
          &lt;/SelectParameters&gt;
  
          &lt;InsertParameters&gt;
              &lt;asp:SessionParameter DefaultValue="" Name="session" SessionField="__MySession__" Type="Object" /&gt;
              &lt;asp:QueryStringParameter Name="resMealInTakeIdString" QueryStringField="resMealInTakeId" Type="String" /&gt;
              &lt;asp:QueryStringParameter Name="nourishment" QueryStringField="nourishmentType" Type="String" /&gt;
              &lt;asp:Parameter Name="IsDeclined" Type="String"/&gt;
              &lt;asp:Parameter Name="IsOutOfFac" Type="String"/&gt;
              &lt;asp:Parameter Name="IsNpo" Type="String"/&gt;
              &lt;asp:Parameter Name="MealReplacement" Type="string"/&gt;
              &lt;asp:Parameter Name="Pct" Type="String"/&gt;
              &lt;asp:Parameter Name="Fluid" Type="String"/&gt;
              &lt;asp:Parameter Name="FortifiedFluid" Type="String"/&gt;
              &lt;asp:Parameter Name="FluidTotal" Type="String"/&gt;
              &lt;asp:Parameter Name="TubeFeeding" Type="String" /&gt;
          &lt;/InsertParameters&gt;
  
          &lt;UpdateParameters&gt;
              &lt;asp:SessionParameter DefaultValue="" Name="session" SessionField="__MySession__" Type="Object" /&gt;
              &lt;asp:QueryStringParameter Name="resMealInTakeIdString" QueryStringField="resMealInTakeId" Type="String" /&gt;
              &lt;asp:QueryStringParameter Name="nourishment" QueryStringField="nourishmentType" Type="String" /&gt;
              &lt;asp:Parameter Name="IsDeclined" Type="String"/&gt;
              &lt;asp:Parameter Name="IsOutOfFac" Type="String"/&gt;
              &lt;asp:Parameter Name="IsNpo" Type="String"/&gt;
              &lt;asp:Parameter Name="MealReplacement" Type="String"/&gt;
              &lt;asp:Parameter Name="Pct2EditBind" Type="String"/&gt;
              &lt;asp:Parameter Name="Fluid2EditBind" Type="String"/&gt;
              &lt;asp:Parameter Name="FortifiedFluid2EditBind" Type="String"/&gt;
              &lt;asp:Parameter Name="TubeFeeding" Type="String" /&gt;
          &lt;/UpdateParameters&gt;
  
      &lt;/asp:ObjectDataSource&gt;
  
      &lt;asp:ObjectDataSource ID="MealReplacementOptionDataSource" runat="server" 
          TypeName="Chart2GoWeb.Domain.Entities.WFEvents.MealReplacementOption" 
          SelectMethod="Select"&gt;
      &lt;/asp:ObjectDataSource&gt;
  
      &lt;asp:FormView
          DataSourceID="ResidentsMealsODS" 
          ID="nourishmentFormView" 
          DefaultMode="Edit" 
          OnItemInserted="nourishment_OnItemInserted" 
          OnItemUpdated="nourishment_OnItemUpdated" 
          RunAt="server"&gt;
          &lt;EditItemTemplate&gt;
  
          &lt;table class="EventQtable"&gt;
              &lt;tr&gt;
                  &lt;th colspan="2"&gt;
                      &lt;asp:Label ID="Title" runat="server"&gt;&lt;% Response.Write( TitleString); %&gt;&lt;/asp:Label&gt;
                  &lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Date&lt;/td&gt;
                  &lt;td&gt;&lt;asp:Label ID="mealDate" runat="server" Text='&lt;%# Eval("MealDate") %&gt;'/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Declined&lt;/td&gt;
                  &lt;td&gt;&lt;asp:CheckBox ID="cbDeclined" runat="server" Checked='&lt;%# Bind("IsDeclined") %&gt;' /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Out Of Facility&lt;/td&gt;
                  &lt;td&gt;&lt;asp:CheckBox ID="cbIsOutOfFac" runat="server" Checked='&lt;%# Bind("IsOutOfFac") %&gt;'/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;NPO&lt;/td&gt;
                  &lt;td&gt;&lt;asp:CheckBox ID="cbNPO" runat="server" Checked='&lt;%# Bind("IsNpo") %&gt;'/&gt;&lt;/td&gt;
              &lt;/tr&gt;
  &lt;% 
      // Only show the meal replacement if the nourishment type does NOT have an underscore in it.
      if (Request.QueryString["nourishmentType"].IndexOf('_') == -1)
      { 
  %&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      Meal Replacement&lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:DropDownList ID="ddlMealReplacement" runat="server" AutoPostBack="True" 
                          DataSourceID="MealReplacementOptionDataSource" DataTextField="DisplayValue" 
                          DataValueField="DBValue"                         
                          SelectedValue='&lt;%# Bind("MealReplacement") %&gt;' /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  &lt;%
      }
  %&gt;
              &lt;tr&gt;
                  &lt;td&gt;Meal&lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="lblMealOld" runat="server" CssClass="ccUnits" Text='&lt;%# Eval("Pct4Edit") %&gt;' /&gt;% +
                      &lt;asp:TextBox ID="txtMeal" runat="server" type="number" CssClass="ccUnits" MaxLength="3" OnKeyPress="NumericOnly()" Text='&lt;%# Bind("Pct2EditBind") %&gt;' /&gt;%&lt;asp:RangeValidator ID="rvRangeValidator" runat="server" ControlToValidate="txtMeal" ErrorMessage="Valid range is 0-200" MaximumValue="200" MinimumValue="0" Type="Integer"&gt;*&lt;/asp:RangeValidator&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Fluid&lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="lblFluidOld" runat="server" CssClass="ccUnits" Text='&lt;%# Eval("Fluid4Edit") %&gt;' /&gt;cc +
                      &lt;asp:TextBox ID="txtFluid" runat="server" type="number" CssClass="ccUnits" MaxLength="4" OnKeyPress="NumericOnly()" Text='&lt;%# Bind("Fluid2EditBind") %&gt;' /&gt;cc
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Fortified Fluid&lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="lblFortifiedFluidOld" runat="server" CssClass="ccUnits" Text='&lt;%# Eval("FortifiedFluid4Edit") %&gt;' /&gt;cc +
                      &lt;asp:TextBox ID="txtFortifiedFluid" runat="server" type="number" CssClass="ccUnits" MaxLength="4" OnKeyPress="NumericOnly()" Text='&lt;%# Bind("FortifiedFluid2EditBind") %&gt;' /&gt;cc
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Fluid Total&lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="lblFluidTotal" runat="server" CssClass="ccUnits" Text='&lt;%# Eval("FluidTotal4Edit") %&gt;' /&gt;cc
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;asp:Button ID="saveButton" runat="server" CommandName="Update" CssClass="GenBtn" Text="Save" /&gt;&amp;nbsp;
          &lt;asp:Button ID="cancelButton" runat="server" CssClass="GenBtn" onclick="cancelButton_Click" Text="Cancel" /&gt;
          &lt;/EditItemTemplate&gt;
  
  
  
          &lt;InsertItemTemplate&gt;
          &lt;table class="EventQtable"&gt;
              &lt;tr&gt;
                  &lt;th colspan="2"&gt;&lt;asp:Label ID="Title" runat="server"&gt;&lt;% Response.Write( TitleString); %&gt;&lt;/asp:Label&gt;&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Date&lt;/td&gt;
                  &lt;td&gt;&lt;asp:Label ID="mealDate" runat="server" Text='&lt;%# Eval("MealDate") %&gt;'/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Declined&lt;/td&gt;
                  &lt;td&gt;&lt;asp:CheckBox ID="cbDeclined" runat="server" Checked='&lt;%# Bind("IsDeclined") %&gt;'/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Out Of Facility&lt;/td&gt;
                  &lt;td&gt;&lt;asp:CheckBox ID="cbIsOutOfFac" runat="server" Checked='&lt;%# Bind("IsOutOfFac") %&gt;'/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;NPO&lt;/td&gt;
                  &lt;td&gt;&lt;asp:CheckBox ID="cbNPO" runat="server" Checked='&lt;%# Bind("IsNpo") %&gt;'/&gt;&lt;/td&gt;
              &lt;/tr&gt;
  &lt;% 
      // Only show the meal replacement if the nourishment type does NOT have an underscore in it.
      if (Request.QueryString["nourishmentType"].IndexOf('_') == -1)
      { 
  %&gt;
              &lt;tr&gt;
                  &lt;td&gt;Meal Replacement&lt;/td&gt;
                  &lt;td&gt;&lt;asp:DropDownList ID="ddlMealReplacement" runat="server" AutoPostBack="True" 
                                        DataSourceID="MealReplacementOptionDataSource" DataTextField="DisplayValue" 
                                        DataValueField="DBValue" 
                                        SelectedValue='&lt;%# Bind("MealReplacement") %&gt;' /&gt;&lt;/td&gt;
              &lt;/tr&gt;
  &lt;% 
      }
  %&gt;
              &lt;tr&gt;
                  &lt;td&gt;Meal&lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="lblMealOld" runat="server" Text="0" CssClass="ccUnits"/&gt;%&amp;nbsp; +
                      &lt;asp:TextBox ID="txtMeal" runat="server" type="number" Text='&lt;%# Bind("Pct") %&gt;' MaxLength="3" OnKeyPress="NumericOnly()" CssClass="ccUnits" /&gt;%&lt;asp:RangeValidator ID="rvRangeValidator" runat="server" ErrorMessage="Valid range is 0-200" Type="Integer" MaximumValue="200" MinimumValue="0" ControlToValidate="txtMeal"&gt;*&lt;/asp:RangeValidator&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Fluid&lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="lblFluidOld" runat="server" Text="0" CssClass="ccUnits"/&gt;cc +
                      &lt;asp:TextBox ID="txtFluid" runat="server" type="number" Text='&lt;%# Bind("Fluid") %&gt;' MaxLength="4" OnKeyPress="NumericOnly()" CssClass="ccUnits" /&gt;cc
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Fortified Fluid&lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="lblFortifiedFluidOld" runat="server" Text="0" CssClass="ccUnits" Enabled="false" /&gt;cc +
                      &lt;asp:TextBox ID="txtFortifiedFluid" runat="server" type="number" Text='&lt;%# Bind("FortifiedFluid") %&gt;'  MaxLength="4" OnKeyPress="NumericOnly()" CssClass="ccUnits" /&gt;cc
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Fluid Total&lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="lblFluidTotal" runat="server" Text='0' CssClass="ccUnits"/&gt;cc
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;asp:Button ID="saveButton"  CssClass="GenBtn" runat="server" Text="Save" CommandName="Insert"/&gt;&amp;nbsp;
          &lt;asp:Button ID="cancelButton" CssClass="GenBtn" runat="server" Text="Cancel" onclick="cancelButton_Click"/&gt;
  
          &lt;/InsertItemTemplate&gt;
      &lt;/asp:FormView&gt;
  
  &lt;script type="text/javascript"&gt;
      var cbDeclinedID = '&lt;%= cbDeclined.ClientID %&gt;';
  &lt;/script&gt; 
  
  &lt;/asp:Content&gt;
  
  &lt;asp:Content ID="Content3" ContentPlaceHolderID="FooterContent" runat="server"&gt; 
      &lt;table class="footer" border="0" cellspacing="0" cellpadding="0" style="background-image: url('&lt;%= ResolveClientUrl("~/Images/BottomBar-1000x42.png")%&gt;'); background-repeat: no-repeat; height: 42px; width: 1000px;" &gt;
          &lt;tr&gt;
              &lt;td width="4%"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td width="9%"&gt;&lt;/td&gt;
              &lt;td width="56%"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td width="27%" align="center"/&gt;
              &lt;td width="4%"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/asp:Content&gt;
  </code></pre>