Tuesday, May 11, 2010

How to get set read TextBox value using JQuery




Please visit my new Web Site WWW.Codedisplay.com



As we knew that using javascript to read or get or set textbox value is easy but due to JQuery notation novice developers always make mistakes to read textbox value. Here in this article i will show you how one can get set read textbox value or textbox text using JQuery.









To run the example first add a page in your project. Then add three textboxes and one command button to do sum like below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery1.aspx.cs" Inherits="jQuery1" %>

<!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 read TextBox value using JQuery</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <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>
    </div>
    </form>
</body>
</html>

Now add the below JQuery script which will read two number from txtFirst & txtSecond and set the result into third TextBox:
<script language="javascript">
            $(document).ready(function() {          
                $('#btn').click(function() {
                    
                    // Read First number & 2nd Number from TextBox
                    var $nFirstNum = parseInt($('#txtFirst').val())
                    var $nSecondNum = parseInt($('#txtSecond').val())
                    var $nResult = $nFirstNum+$nSecondNum
                    
                    // Set the result into txtSum TextBox
                    $('#txtSum').val($nResult)
                    return false;
                });
            });
    </script>


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

Hope now you can read or write value to a TextBox using JQuery easily.

5 comments:

Pratik Joshi said...

great blog.

Anonymous said...

kiss kiss thnx

Anonymous said...

Very Straight forward, thanks :)

Anonymous said...

Thank You!

Garrett Marshall said...

Sorry, looks like what I need to do - but where does the script go? Line numbers are confusing me.

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash