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>
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!.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.