ASP.Net and JQuery - How to access all textboxes using JQuery

I am going to start a series of posts on ASP.Net and JQuery that will explain a lot of common tasks that can be accomplished using this fantastic open source Javascript library.

Initially I found out about JQuery when I did browse Scott's Gu blog post. Have a look here as well if you want to see the official announcement from the JQuery people.

It is widely known that JQuery ships now with Visual Studio. You can find it as a seperate download here.

Sadly, we canot cover the basics of JQuery in this post so here are a few resources for you to focus on

In this first post I will show you how to access all textboxes using JQuery.

We will demonstrate this with a step by step example. I will use Visual Studio 2010. You can also use Visual Studio 2008 if you do not have Visual Studio. Express editions work fine.

1) Create an ASP.Net website. Choose an appropriate name for your site.

2) Now we have the default web site ready. We will add some textboxes in the default.aspx page

so the code-markup looks like this


  <asp:TextBox ID="Txt1" runat="server" Text="MyFirstTextBox"></asp:TextBox><br />
        <asp:TextBox ID="Txt2" runat="server" Text="MySesondTextBox"></asp:TextBox><br />
        <asp:TextBox ID="Txt3" runat="server" Text="MyThirdTextBox"></asp:TextBox><br />
        <asp:TextBox ID="Txt4" runat="server" Text="MyFourthTextBox"></asp:TextBox><br />
        <asp:Button ID="btn1" runat="server" Text="Display" />
  <p id="showselected"></p>

 3) In the Site.master file before the </head> tag add this line of code


<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

4) In the <head> section of the Site.master page we need to add the actual  JQuery code that makes the selection of the textboxes text possible


         $(function () {
             $('input[id$=btn1]').click(function (e) {
                .append($("input:text").map(function () {
                    return $(this).val() || null;
                }).get().join("<br/>  "));


When the button is clicked, the postback is prevented using e.preventDefault().We then use a
Selector to match all input elements of type text (input:text) I am using the map function to iterate though the textbox controls.

We do apply a filter , which is that we do not want to have textboxes with empty values appended in the paragraph with id "showselected". Run your application and check that everything works ok.

5) If you want to display only some textboxes you can use a class property.

So you can add in the markup


 <asp:TextBox ID="Txt5" runat="server" Text="MyFifthTextBox" CssClass="sel"></asp:TextBox><br />
 <asp:TextBox ID="Txt6" runat="server" Text="MySixthTextBox" CssClass="sel"></asp:TextBox><br />

Now we need to modify our JQuery code.Add this code just below the code we entered in the <head> section of the Site.master page.


  $('input[id$=btn2]').click(function (e) {
                .append($("input.sel").map(function () {
                    return $(this).val() || null;
                }).get().join("<br/>  "));

Run your application and check that everything works ok. Only the content of the last two textboxes will be shown.

I have tested this JQuery example with all the modern browsers.Please note that you do need to have a basic understanding of JQuery to fully understand this and the following JQuery & tutorials.

Hope it helps.


  • this is an excellent post!!! It really helped me to understand this

  • Hello! I know this is somewhat off-topic however I had to ask.
    Does running a well-established website such as yours require a lot of work?
    I'm brand new to operating a blog however I do write in my journal every day. I'd like to start a blog so I will be
    able to share my experience and feelings online. Please let me know if you have
    any kind of ideas or tips for brand new aspiring blog owners.

Comments have been disabled for this content.