DotNetStories
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
- The main site is this
- http://blog.jquery.com/
- http://docs.jquery.com/Main_Page
- A fantastic video series for the absolute beginner.
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
<script>
$(function () {
$('input[id$=btn1]').click(function (e) {
e.preventDefault();
$("#showselected").text('')
.append($("input:text").map(function () {
return $(this).val() || null;
}).get().join("<br/> "));
});
});
</script>
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) {
e.preventDefault();
$("#showselected").text('')
.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 & Asp.net tutorials.
Hope it helps.