Post
Ask Question

Accessing Selected Textbox Values Using JQuery


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.

Open Website Application
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.


Add NEw Item

New Web Page

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.

Add JQuery File

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 />
     &nbsp;
    <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:

Design Of Web Page

Step 8: Further we are going to run the application by pressing F5.

Output:

Output


Similar Articles