jQuery calculate sum of values in all text fields

jQuery calculate sum of values in all text fields

Today, We want to share with you jQuery calculate sum of values in all text fields.
In this post we will show you jQuery calculate sum of values in all text fields, hear for jQuery calculate sum of values in all text fields we will give you demo and example for implement.
In this post, we will learn about jQuery calculate sum of values in all text fields with an example.

jQuery is a one type of JavaScript Library.and jQuery greatly simplifies and esy JavaScript programming.jQuery is very easy to learn.In this post jQuery calculate sum of values in all text fields.

Include jquery

First of all include jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

SCRIPT using jquery

jquery script add to sum all particular input box to get value and fetch to all the input value sum

<script>
$(document).ready(function(){
	$('.price').blur(function () {
		var sumdata = 0;
		$('.price').each(function() {
			if($(this).val()!="")
			 {
				sumdata += parseFloat($(this).val());
			 }

		});
			$("#sum").html(sumdata);
	});
});
</script>

HTML Body Part

Simple HTML part append html all the client side get input data and output sum display in html part.

<body>
<h1>calculate with Jquery each time a input changes</h1>
<label>first value : </label><input type="text" class="price" /><br>
<label>second value : </label><input type="text" class="price" /><br>
<label>third value : </label><input type="text" class="price" /><br>
<label>fourth value : </label><input type="text" class="price" /><br>
<hr/>
<label>Sum is : </label>
<mark><h1><label id="sum"></label></h1></mark>

</body>

Full Example of calculate with Jquery each time a input changes

Add two or more textbox values and display the sum in a third label automatically.

<!DOCTYPE html>
<html>
<head>
<title>calculate with Jquery each time a input changes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$('.price').blur(function () {
		var sumdata = 0;
		$('.price').each(function() {
			if($(this).val()!="")
			 {
				sumdata += parseFloat($(this).val());
			 }

		});
			$("#sum").html(sumdata);
	});
});
</script>
</head>
<body>
<h1>calculate with Jquery each time a input changes</h1>
<label>first value : </label><input type="text" class="price" /><br>
<label>second value : </label><input type="text" class="price" /><br>
<label>third value : </label><input type="text" class="price" /><br>
<label>fourth value : </label><input type="text" class="price" /><br>
<hr/>
<label>Sum is : </label>
<mark><h1><label id="sum"></label></h1></mark>

</body>
</html>

Demo

Example

We hope you get an idea about jQuery calculate sum of values in all text fields
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Shell Script to Add Two Numbers using ommand line arguments
  2.   Update Scope Variable using Angular Example
  3.   PHP Force File Download HTML button code
  4.   Angular 4 Grid with CRUD operations | Angular 4 insert update delete
  5.   Automatically Angularjs Set focus input from controller
  6.   Reset input fields using onchange event in JQuery
  7.   Laravel 6 Clear cache Example
  8.   JQuery Allow Only Numbers Input in Textbox
  9.   Send email via Gmail SMTP server in Laravel 7/6
  10.   Angular 6 Routing Tutorial with Examples