← Tutti gli articoli

Access Values from All or Selective TextBoxes using jQuery

30 marzo 2011  · jQuery · Article  ·  15 visite

You want to access values from ALL or Selective ASP.NET Textboxes on a Button click. The values should be displayed separately on each line. Empty Textboxes should be ignored.

Solution:
 
 
<%@ Page Language="C#" AutoEventWireup="true" EnableTheming="false" Theme="" CodeFile="R1-AccessAllTextBoxes.aspx.cs" Inherits="ASPNET_TextBox_AccessAllTextBoxes" %><!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>Access Values From Multiple or Selected ASP.NET TextBoxes</title>

    <link href="../CSS/Demos.css" rel="stylesheet" type="text/css" />

    <script type='text/javascript' 

        src='../Scripts/jquery-1.3.2.min.js'>

    </script>

    

    <script type="text/javascript">

        $(function() {

            $('input[id$=btnAll]').click(function(e) {

                e.preventDefault();

                $("#para").text('')

                .append($("input:text").map(function() {

                    return $(this).val() || null;

                }).get().join("<br/>  "));

            });

            $('input[id$=btnSel]').click(function(e) {

                e.preventDefault();

                $("#para").text('')

                .append($("input.selected").map(function() {

                    return $(this).val() || null;

                }).get().join("<br/> "));

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div class="bigDiv">

        <h2>Access Values From Multiple/Selected ASP.NET TextBoxes</h2><br />

        <asp:TextBox ID="tb1" runat="server" Text="1stTextBox" /><br />

        <asp:TextBox ID="tb2" runat="server" Text="2ndTextBox"/><br />

        <asp:TextBox ID="tb3" runat="server" Text="3rdTextBox"/><br />

        <asp:TextBox ID="tb4" runat="server" Text="1stTextBox-class-selected" class="selected" /><br />

        <asp:TextBox ID="tb5" runat="server" Text="4thTextBox"/><br />

        <asp:TextBox ID="tb6" runat="server" Text="2ndTextBox-class-selected"  class="selected" /><br /><br />

        <asp:Button ID="btnAll" runat="server" Text="Display All" ToolTip="Click to display text from all boxes" /><br />

        <asp:Button ID="btnSel" runat="server" Text="Display Selective" ToolTip="Click to display text from boxes with class-selected" />

        <br/>

        Tip: Clicking on the 'Display Selective' button retrieves<br /> 

        values from only those TextBoxes which have 'class=selected'

        <p id="para"></p>

    </div>

    </form>

</body>

</html>