Subscribe
Please visit my new Web Site https://coderstechzone.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:
Hope now you can read or write value to a TextBox using JQuery easily.
5 comments:
great blog.
kiss kiss thnx
Very Straight forward, thanks :)
Thank You!
Sorry, looks like what I need to do - but where does the script go? Line numbers are confusing me.
I WOULD BE DELIGHTED TO HEAR FROM YOU