Introduction: In this
article we are going to see how we will access the selected value of text box using jQuery. This application will show the selected text box value on when clicking on the
button. It will show you all the selected items that have that class at the bottom of the page.
It will ignore an empty text box. As we
know, jQuery is a library which is used to select
the value of text box on the event click of button.
Step 1: Firstly you have to
create a Website
- Take a new Website .
- Go to Visual Studio 2010.
- Give it name and click OK.
Step 2: Now we have to add a new page to the website.
- Create a Web page and give it any name
- Add new item
- Go to solution explorer.
- Click OK.
Step 3: Now we have to add
a JScript file which will have to download name as jquery-1.3.2.min.js
to the Script folder in the website project. let's look how it will appear.
Step 4: In this step you
will have to add the reference of jQuery files which is always write to the head
section of the web page is given below. Here are giving the http reference of
the jQuery of type JQuery1.3.2
<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.3.2-min.js"></script>
Step 5: Further you have to
write the jQuery code which you can placed it into Head section or body section
of HTML file.
Code :
<script type="text/javascript">
$(function
() {
$('input[id$=bsel]').click(function
(e) {
e.preventDefault();
$("#pr1").text('').append($("input.Text_selected").map(function
() {
return $(this).val()
|| null;
}).get().join("<br/>"));
});
});
</script>
Code Description : The
above code is the code of jQuery which will allow you to see only the selected
textbox value on click of the button. In which we are using some selectors and
e.preventDefault() method is used to prevented the postback occuring during
clicking. The content of the paragraph is reset ($("#pr1").text('')) and we then
use a Selector to match all selected input which have the Text_selected class is
(input:Text_selected). The $.map() method iterates through all the textboxes on
the page and invokes a filter function to select the non-empty textboxes. The
resultsare appended to a paragraph (para) and displayed individually using a
line break (<br/>).
Step 6: In this Step we are
showing you a complete code for the default2.aspx page given below.
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('input[id$=bsel]').click(function
(e) {
e.preventDefault();
$("#pr1").text('').append($("input.Text_selected").map(function
() {
return $(this).val()
|| null;
}).get().join("<br/>"));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
Accessing Selected TextBox Values Using jQuery
</h2><br/>
<asp:TextBox ID="Txt1" runat="server" Text="India" class="Text_selected"></asp:TextBox>
<br />
<asp:TextBox Id="Txt1" runat="server"
Text="England"
class="Text_selected" />
<br />
<asp:TextBox ID="Txt3" runat="server" Text="Australia"></asp:TextBox>
<br />
<asp:TextBox ID="Txt4" runat="server" Text="South Africa"></asp:TextBox>
<br />
<asp:Button ID="bsel" runat="server" Text="Display
Selected"
BackColor="#CC6699" Width="110px" ToolTip="Retrieve the
selected TextboxValues" /><br />
<p id="pr1"></p>
</div>
</form>
</body>
</html>
Step 7: In this step we
have to see the Design of the Default2.aspx page.
Before Run:
Step 8: Further we are
going to run the application by pressing F5.
Output:
