How to get set read TextBox value using JQuery C# VB.Net in ASP.Net

As we knew that using javascript to read or get or set TextBox Value is easy but in JQuery notation it’s a little bit different to read TextBox Values. Here in this article i will show you how one can get set or read Asp.Net C# or VB.Net Server Control TextBox Value or TextBox Text using JQuery. To make you understand the whole thing here i will create a simple summation calculator using JQuery. Where user can put 2 Integer numbers in 2 TextBoxes, the Jquery simple calculator example function will read & assign TextBox Server controls values into 2 JQuery variables. After summing the values the JQuery function will display the result into 3rd Textbox.

Related Article:
Javascript to Get Set or Read Write TextBox value in ASP.Net C# VB.Net

To do that please follow the steps below:
1. Add a JQuery Library reference in your page

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

2. Add 3 Serverside TextBoxes and 1 Command Button to do the sum

        <asp:TextBox runat="server" ID="txtFirst"></asp:TextBox>
        <asp:TextBox runat="server" ID="txtSecond"></asp:TextBox>
        <asp:Button runat="server" ID="btn" Text="+" />
        <asp:TextBox runat="server" ID="txtSum"></asp:TextBox>

3. Add the below JQuery script to read 2 number from txtFirst & txtSecond and set the result into third TextBox

    <script language="javascript">
        $(document).ready(function () {
            $('#<%= btn.ClientID %>').click(function () {

                // Read First number & 2nd Number from TextBox
                var $nFirstNum = parseInt($('#<%= txtFirst.ClientID %>').val())
                var $nSecondNum = parseInt($('#<%= txtSecond.ClientID %>').val())
                var $nResult = $nFirstNum + $nSecondNum

                // Set the result into txtSum TextBox
                $('#<%= txtSum.ClientID %>').val($nResult)
                return false;

Now run the page. Hope you will get below interface:

Hope now you can read or write value to a TextBox using JQuery easily. This example will work in simple web pages as well as web pages under Master pages. If you can’t understand yet please download the working example from below:

Download Code Example C#        Download Code Example VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code