Selecting a control using ID and displaying its value

This recipe demonstrates how to access basic ASP.NET controls, such as CheckBoxList, TextBox, and RadioButtonList on a web form using jQuery's #identifier selector. The constructs used in this example are as follows:

Getting ready

Following are the steps to create a form using basic ASP.NET controls:

1. In this example, we will create a simple User Registration form, as shown in the following screenshot:
   
2. Create an ASP.NET Web Application project using the Empty template and name the project Recipe1 (or any other suitable name).
3. Add a Web Form to the project and name it Default.aspx.
4. Create a Scripts folder and add jQuery files (debug and release versions of a library) to it.
5. Include the jQuery library in the form using either the <script> block or the ScriptManager control, as described in Chapter 1, Getting Started with jQuery in ASP.NET.
6. Now, drag and drop ASP.NET controls by navigating to the Toolbox | Standard controls to create the form, as shown in the preceding screenshot.
7. The HTML markup for the form is as follows:

   <table>
     <tr>
       <td>
         <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
       </td>
       <td>
         <asp:TextBox ID="txtName" runat="server" Width="223px"></asp:TextBox>
       </td>
     </tr>
     <tr>
       <td>
         <asp:Label ID="lblGender" runat="server" Text="Gender"></asp:Label>
       </td>
       <td>
         <asp:RadioButtonList ID="rblGender" runat="server">
           <asp:ListItem Text="Male" Value="Male"></asp:ListItem>
           <asp:ListItem Text="Female" Value="Female"></asp:ListItem>
         </asp:RadioButtonList>
       </td>
     </tr>
     <tr>
       <td>
         <asp:Label ID="lblEducation" runat="server" Text="Highest Education"></asp:Label>
       </td>
       <td>
         <asp:DropDownList ID="ddlEducation" runat="server" Height="16px" Width="231px">
           <asp:ListItem Text="--Select--" Value=""></asp:ListItem>
           <asp:ListItem Text="Post Graduate" Value="PG"></asp:ListItem>
           <asp:ListItem Text="Degree" Value="DG"></asp:ListItem>
           <asp:ListItem Text="Diploma" Value="DP"></asp:ListItem>
           <asp:ListItem Text="A-Levels" Value="AL"></asp:ListItem>
           <asp:ListItem Text="O-Levels" Value="OL"></asp:ListItem>
         </asp:DropDownList>
       </td>
     </tr>
     <tr>
       <td>
         <asp:Label ID="lblInterest" runat="server" Text="Interest Areas"></asp:Label>
       </td>
       <td>
         <asp:CheckBoxList ID="chkInterest" runat="server">
           <asp:ListItem Text="ASP.NET" Value="ASP.NET"></asp:ListItem>
           <asp:ListItem Text="Java" Value="Java"></asp:ListItem>
           <asp:ListItem Text="Android" Value="Android"></asp:ListItem>
           <asp:ListItem Text="HTML5" Value="HTML5"></asp:ListItem>
           <asp:ListItem Text="XML" Value="XML"></asp:ListItem>
         </asp:CheckBoxList>
       </td>
     </tr>
     <tr>
       <td colspan="2">
         &nbsp;
         <asp:CheckBox ID="chkSubscribe" runat="server" Text="Subscribe to newsletter" />
       </td>
     </tr>
     <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
     </tr>
     <tr>
       <td>&nbsp;</td>
       <td>
         <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
       </td>
     </tr>
   </table>

How to do it…

Include the following jQuery code in a <script> block after the jQuery library has been included in the form:

<script type="text/javascript">
  $(document).ready(function() {
    $("#<%=btnSubmit.ClientID%>").click(function() {
      var strName = $("#<%=txtName.ClientID%>").val();
      var strGender =
        $("#<%=rblGender.ClientID%> input:checked").val();
      var strEducation = $("#<%=ddlEducation.ClientID%>").find(":selected").text();
      var strInterest = "";
      $("#<%=chkInterest.ClientID%> input:checked").each(
        function() {
          strInterest += " " + $(this).val();
        });
      var strSubscribe = "";
      if ($("#<%=chkSubscribe.ClientID%>").is(":checked")) {
        strSubscribe = $("#<%=chkSubscribe.ClientID%>").next().html();
      }
      var strDisplayMsg = "You are about to submit the following data: \r\n\r\n" +
        "Name: " + strName + "\r\n" +
        "Gender: " + strGender + "\r\n" +
        "Highest Education: " + strEducation + "\r\n" +
        "Interest Areas: " + strInterest + "\r\n" +
        strSubscribe + "\r\n\r\n" +
        "Click OK to proceed"
      window.confirm(strDisplayMsg);
    });
  });
</script>

Note

The preceding <script> block can be included in the <head> or <form> element, depending on how the jQuery library has been included in the page.

How it works…

Let's look at how the form works:

1. Save the application using Ctrl + S, and run it by pressing F5. This will launch the User Registration page. Enter some test values in the controls, and click on the Submit button. A confirmation prompt is displayed that summarizes the values of the controls as follows:
   

   Note

   Note that no validation has been done on the controls, and the page allows you to submit a blank form as well. Validation will be described in subsequent chapters.

2. In the jQuery <script> block, every ASP.NET control is retrieved using the #identifier selector on the equivalent rendered HTML tag. The code is executed when the click event of the Submit button is raised, as shown in the following code:

   $("#<%=btnSubmit.ClientID%>").click(function () {…});

   Note

   ClientID is the value assigned by ASP.NET to the ID of the equivalent HTML tag generated by a server control at runtime. ASP.NET provides various algorithms for the generation of ClientIDs such as AutoID, Static, Predictable, and Inherit.

3. At runtime, the TextBox control is rendered as the following HTML input element (right-click on the page in the browser, and click on View Source to see the rendered HTML):

   <input name="txtName" type="text" id="txtName" style="width:223px;" />

4. So, in the jQuery code, the value of the TextBox control with an ID equal to txtName can be accessed using the following code:

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

5. The RadioButtonList control is rendered as the following HTML code:

   <table id="rblGender">
     <tr>
       <td><input id="rblGender_0" type="radio" name="rblGender" value="Male" /><label for="rblGender_0">Male</label></td>
     </tr>
     <tr>
       <td><input id="rblGender_1" type="radio" name="rblGender" value="Female" /><label for="rblGender_1">Female</label></td>
     </tr>
   </table>

   In the jQuery code, the selected radio button from the list can be accessed using the checked filter, as follows:

   var strGender = $("#<%=rblGender.ClientID%> input:checked").val();

6. The DropDownList control is rendered as the following HTML code:

   <select name="ddlEducation" id="ddlEducation" style="height:16px;width:231px;">
   <option value="">--Select--</option>
   <option value="PG">Post Graduate</option>
   <option value="DG">Degree</option>
   <option value="DP">Diploma</option>
   <option value="AL">A-Levels</option>
   <option value="OL">O-Levels</option>
   </select>

   The jQuery code finds the selected item from the DropDownList control using the selected filter and returns its text value as follows:

    var strEducation = $("#<%=ddlEducation.ClientID%>").find(":selected").text();

7. The CheckBoxList control is rendered as the following HTML code:

   <table id="chkInterest">
   <tr>
     <td><input id="chkInterest_0" type="checkbox" name="chkInterest$0" value="ASP.NET" /><label for="chkInterest_0">ASP.NET</label></td>
   </tr>
   <tr>
     <td><input id="chkInterest_1" type="checkbox" name="chkInterest$1" value="Java" /><label for="chkInterest_1">Java</label></td>
   </tr>
   <tr>
     <td><input id="chkInterest_2" type="checkbox" name="chkInterest$2" value="Android" /><label for="chkInterest_2">Android</label></td>
   </tr>
   <tr>
     <td><input id="chkInterest_3" type="checkbox" name="chkInterest$3" value="HTML5" /><label for="chkInterest_3">HTML5</label></td>
   </tr>
   <tr>
     <td><input id="chkInterest_4" type="checkbox" name="chkInterest$4" value="XML" /><label for="chkInterest_4">XML</label></td>
   </tr>
   <table>

   The jQuery code loops through each checked element using the .each() method, and appends its value to a strInterest string as follows:

   var strInterest = "";
   $("#<%=chkInterest.ClientID%> input:checked").each(function () {
     strInterest += " " + $(this).val();
   });

8. The subscribe CheckBox control renders two sibling HTML tags: <input> and <label>, as follows:

   <input id="chkSubscribe" type="checkbox" name="chkSubscribe" /><label for="chkSubscribe">Subscribe to newsletter</label>

   Hence, the jQuery code uses .next().html() to determine the text value of the CheckBox control as follows:

   var strSubscribe = "";
   if ($("#<%=chkSubscribe.ClientID%>").is(":checked")) {
      strSubscribe = $("#<%=chkSubscribe.ClientID%>").next().html();
   }

   If the checkbox is unchecked, strSubscribe is an empty string.

9. Finally, all the retrieved values of the controls are appended to the strDisplayMsg string, and the script uses JavaScript's window.confirm() command to display the confirmation dialog box to the user. If the user clicks on OK, the form is submitted. Clicking on Cancel prevents the form from being submitted:

   var strDisplayMsg = "You are about to submit the following data: \r\n\r\n" +
   "Name: " + strName + "\r\n" +
   "Gender: " + strGender + "\r\n" +
   "Highest Education: " + strEducation + "\r\n" +
   "Interest Areas: " + strInterest + "\r\n" +
   strSubscribe + "\r\n\r\n" +
   "Click OK to proceed"
   window.confirm(strDisplayMsg);

See also

• The Selecting a control using the CSS class recipe