In this post we are going to see a simple addition of 2 numbers using JQuery. Copy and paste the below code:
In the first line, we include the JQuery script file, we can download the same from this url.
In the above code we have used the following JQuery functions:
ready() – check that DOM elements are loaded.
click() – attach click event to the respective element, here button
val() – Function get/sets value from/to the text box.
Also I have used the javascript function “parseInt”, which converts the string into an integer (here we have changed the string into Decimal value, that’s why the radix value given as 10).
After entering values in both textboxes when click the “Sum” button, the sum will be displayed in “txtResult” textbox.
Output:
If you have any thoughts please let me know your thoughts in comments!!
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JQuery1_11.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// Check that all document objects are loaded
$(document).ready(function () {
// Attach click event to the "button" object
$('#submitbutton').click(function () {
// get first no
var firstNo = $("#txtFirstNo").val();
// get second no
var secondNo = $("#txtSecondNo").val();
// Convert the input as integer and sum up them
var result = parseInt(firstNo,10) + parseInt(secondNo,10);
$("#txtResult").val(result);
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="txtFirstNo"></asp:TextBox> +
<asp:TextBox runat="server" ID="txtSecondNo"></asp:TextBox> =
<asp:TextBox runat="server" ID="txtResult"></asp:TextBox>
<asp:Button runat="server" ID="submitbutton" Text="Sum"/>
</div>
</form>
</body>
</html>
In the first line, we include the JQuery script file, we can download the same from this url.
In the above code we have used the following JQuery functions:
ready() – check that DOM elements are loaded.
click() – attach click event to the respective element, here button
val() – Function get/sets value from/to the text box.
Also I have used the javascript function “parseInt”, which converts the string into an integer (here we have changed the string into Decimal value, that’s why the radix value given as 10).
After entering values in both textboxes when click the “Sum” button, the sum will be displayed in “txtResult” textbox.
Output:
If you have any thoughts please let me know your thoughts in comments!!
0 comments :