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.

Read Also:  How to Convert XML to JSON in PHP?

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.

Read Also:  Simple Laravel Form Validation Example

<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

Read Also:  jQuery Ajax change dropdown list value

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!.