Thursday, 31 May 2012

How to get/set asp.net textbox value using jquery

Step 1)  Create ASP.NET WEB APPLICATION Using .net 4.0
Step 2) Add new webform(jquerydemo2.aspx)
Step 3) Drag & Drop   jquery file located in script folder
             <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
Step 4)  Add textbox & button control as shown below

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

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    <br />

    <asp:Button ID="Button1" runat="server" Text="Get Data"
/>



    </div>

    </form>

Step 5)  Add jquery script code to a page.
         <script type ="text/javascript">
         $(document).ready(
    function () {
        $("#Button1").click(function () {
            alert($("#TextBox1").attr("value"));
        });
    });
    </script>

Step 6)   Run the page/F5


Step 7)  output




Complete  example

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jquerydemo2.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!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>How to get/set textbox value using JQUERY</title>
    
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type ="text/javascript">
        $(document).ready(
    function () {
        $("#Button1").click(function () {
            alert($("#TextBox1").attr("value"));
        });
    });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Label ID="username"
        runat="server" Text="username"></asp:Label>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br />


    <asp:Button ID="Button1" runat="server" Text="Get Data" />
    
    </div>
    </form>
</body>
</html>


note:cut & paste above code , happy coding....