input values to form
<html>
<head>
<title>ajax example</title>
<link rel="stylesheet" href="bootstrap.css" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.css" crossorigin="anonymous">
<style>
.container{
width:50%;
height:30%;
padding:20px;
}
</style>
</head>
<body>
<div class="container-fluid">
<h3 align="center">Calculate the sum of input values using Jquery or Javascript</h3>
<br/><br/><br/>
<form class="form-horizontal" action="#">
<div id="newuser"></div>
<div class="form-group row">
<label class="control-label col-sm-2" for="value">Value:</label>
<div class="col-sm-2">
<input type="text" name="value" id="value" class="value">
</div>
<label class="control-label col-sm-1" for="Percentage">Percentage:</label>
<div class="col-sm-2">
<input type="text" name="rate" id="rate" class="rate" onblur="getAmount()">
</div>
<label class="control-label col-sm-1" for="Amount">Amount:</label>
<div class="col-sm-2">
<input type="text" name="amount" id="amount" class="amount">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="Value">Value:</label>
<div class="col-sm-2">
<input type="text" name="value" id="value2" class="value">
</div>
<label class="control-label col-sm-1" for="Percentage">Percentage:</label>
<div class="col-sm-2">
<input type="text" name="rate" id="rate2" class="rate" onblur="getAmount()">
</div>
<label class="control-label col-sm-1" for="Amount">Amount:</label>
<div class="col-sm-2">
<input type="text" name="amount" id="amount2" class="amount">
</div>
</div>
<br/><br>
<p style="text-align: center;font-weight: bold;">
Total Value:<input type="text" style="border: none;border-bottom: 1px solid #756D6D;outline: none;" id="total_value"><br>
Total Percent:<input type="text" style="border: none;border-bottom: 1px solid #756D6D;outline: none;" id="total_rate"><br>
Total Amount:<input type="text" style="border: none;border-bottom: 1px solid #756D6D;outline: none;" id="total_amount"><br>
</p>
</form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
function getAmount(){
var value = $('#value').val();
var percent = $('#rate').val();
$('#amount').val(value*percent/100);
var value2 = $('#value2').val();
var percent2 = $('#rate2').val();
$('#amount2').val(value2*percent2/100);
//get the sum of each column of each row
var sum_value = 0;
$('.value').each(function(){
sum_value += +$(this).val();
$('#total_value').val(sum_value);
})
var sum_rate = 0;
$('.rate').each(function(){
sum_rate += +$(this).val();
$('#total_rate').val(sum_rate);
})
var sum_amount = 0;
$('.amount').each(function(){
sum_amount += +$(this).val();
$('#total_amount').val(sum_amount);
})
}
</script>
</body>
</html>