getting value of update input with jquery - html

Question

Im developing Html Form where value will update using jquery as user input the value.
When you enter value in Enter Your Value field it will instantly update its price in Price field
Now i want to add all field sum which will be field 1,field 2,field 3,field 4,field 5 and field 6 and display the total sum in Total Amount but total calculation of the all field are not updating in Total Amount.
Html Code
<form action="" method="post">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<input type="text" class="form-control" name="fullname" placeholder="FUll Name">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<input type="email" class="form-control" name="email" placeholder="Your Email">
</div>
</div>
<div class="col-md-6">
<div class="mb-3 menier">
<h4>Iron Bark:</h4>
$210 Per Cubic Metre
<input type="number" id="ironbark" class="form-control" placeholder="Enter Your Value">
<div class="mt-3">
Price
<input id="ironbarvalue" type="text" name="ironbark" class="total-amount form-control" readonly>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="mb-3 menier">
<h4>Red Gum:</h4>
$200 Per Cubic Metre
<input type="number" id="redgum" class="form-control" placeholder="Enter Your Value">
<div class="mt-3">
<span class="sammy">Price </span>
<input type="text" id="redgumvalue" name="redgum" class="total-amount form-control" readonly>
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3 menier">
<h4>Mixed Gum:</h4>
$100 Per Cubic Metre
<input type="number" id="mixedgum" class="form-control" placeholder="Enter Your Value">
<div class="mt-3">
Price <input id="mixedgumvalue" type="text" name="mixedgum" class="total-amount form-control" readonly>
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3 menier">
<h4>Brown Bark:</h4>
$110 Per Cubic Metre <input id="brownbark" type="number" class="form-control" placeholder="Enter Your Value">
<div class="mt-3">
Price <input id="brownbarkvalue" type="text" name="brownbark" class="total-amount form-control" readonly>
</div>
</div>
</div>
<div class="col-md-6 mt-2">
<div class="mb-3">
<input type="checkbox" class="form-check-input" id="stackfee" name="stackingfee" value="25">
<label class="form-check-label" for="exampleCheck1">Stacking Fee: $25 Per m3 </label>
</div>
</div>
<div class="col-md-6 mt-2">
<div class="mb-3">
<input type="checkbox" class="form-check-input" id="delivery" name="deliveryfee" value="50">
<label class="form-check-label" for="exampleCheck1">Delivery Fee: $50 Minimum </label>
</div>
</div>
<div class="col-md-12 mb-3">
<strong class="">
Total Amount: $
</strong>
<input type="number" class="form-control total-amount" id="sum" name="totalsum" disabled>
</div>
<div class="col-md-12">
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Jquery code
$(document).ready(function(){
$('#ironbark').change(function(){
var ironbarkrate = parseFloat($('#ironbark').val()) || 0;
$('#ironbarvalue').attr('value', 210 * ironbarkrate);
});
$('#redgum').change(function(){
var redgum = parseFloat($('#redgum').val()) || 0;
$('#redgumvalue').attr('value', 200 * redgum);
});
$('#mixedgum').change(function(){
var mixedgum = parseFloat($('#mixedgum').val()) || 0;
$('#mixedgumvalue').attr('value', 100 * mixedgum);
});
$('#brownbark').change(function(){
var brownbark = parseFloat($('#brownbark').val()) || 0;
$('#brownbarkvalue').attr('value', 110 * brownbark);
});
$('#ironbarvalue, #redgumvalue,#mixedgumvalue,#brownbarkvalue').change(function(){
var value1 = parseFloat($('#ironbarvalue').val()) || 0;
var value2 = parseFloat($('#redgumvalue').val()) || 0;
var value3 = parseFloat($('#mixedgumvalue').val()) || 0;
var value4 = parseFloat($('#brownbarkvalue').val()) || 0;
var value5 = parseFloat($('#stackfee').val()) || 0;
var value6 = parseFloat($('#delivery').val()) || 0;
$('#sum').attr('value',value1 + value2 + value3 + value4 + value5 + value5);
});
});
Im Trying to get All sum on Total Amount… but im notable to get Sum display in Total Amount, isnt because Price field is generate by Jquery

Answer 1

You need to create a common function to calculate the sum and you need to call it in each input change and checkbox click event like below:
Working example:
$(document).ready(function() {
$('#ironbark').change(function() {
$('#ironbarvalue').val(210 * (parseFloat($(this).val()) || 0));
calculateSum();
});
$('#redgum').change(function() {
var redgum = parseFloat($('#redgum').val()) || 0;
$('#redgumvalue').val(200 * (parseFloat($(this).val()) || 0));
calculateSum();
});
$('#mixedgum').change(function() {
$('#mixedgumvalue').val(100 * (parseFloat($(this).val()) || 0));
calculateSum();
});
$('#brownbark').change(function() {
$('#brownbarkvalue').val(110 * (parseFloat($(this).val()) || 0));
calculateSum();
});
$('#stackfee').click(function() {
calculateSum();
});
$('#delivery').click(function() {
calculateSum();
});
});
function calculateSum() {
var value1 = parseFloat($('#ironbarvalue').val()) || 0;
var value2 = parseFloat($('#redgumvalue').val()) || 0;
var value3 = parseFloat($('#mixedgumvalue').val()) || 0;
var value4 = parseFloat($('#brownbarkvalue').val()) || 0;
var value5 = ($('#stackfee').is(":checked")) ? parseFloat($('#stackfee').val()) : 0;
var value6 = ($('#delivery').is(":checked")) ? parseFloat($('#delivery').val()) : 0;
$('#sum').val(value1 + value2 + value3 + value4 + value5 + value6);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<input type="text" class="form-control" name="fullname" placeholder="FUll Name">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<input type="email" class="form-control" name="email" placeholder="Your Email">
</div>
</div>
<div class="col-md-6">
<div class="mb-3 menier">
<h4>Iron Bark:</h4>
$210 Per Cubic Metre
<input type="number" id="ironbark" class="form-control" placeholder="Enter Your Value">
<div class="mt-3">
Price
<input id="ironbarvalue" type="text" name="ironbark" class="total-amount form-control" readonly>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="mb-3 menier">
<h4>Red Gum:</h4>
$200 Per Cubic Metre
<input type="number" id="redgum" class="form-control" placeholder="Enter Your Value">
<div class="mt-3">
<span class="sammy">Price </span>
<input type="text" id="redgumvalue" name="redgum" class="total-amount form-control" readonly>
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3 menier">
<h4>Mixed Gum:</h4>
$100 Per Cubic Metre
<input type="number" id="mixedgum" class="form-control" placeholder="Enter Your Value">
<div class="mt-3">
Price <input id="mixedgumvalue" type="text" name="mixedgum" class="total-amount form-control" readonly>
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3 menier">
<h4>Brown Bark:</h4>
$110 Per Cubic Metre <input id="brownbark" type="number" class="form-control" placeholder="Enter Your Value">
<div class="mt-3">
Price <input id="brownbarkvalue" type="text" name="brownbark" class="total-amount form-control" readonly>
</div>
</div>
</div>
<div class="col-md-6 mt-2">
<div class="mb-3">
<input type="checkbox" class="form-check-input" id="stackfee" name="stackingfee" value="25">
<label class="form-check-label" for="exampleCheck1">Stacking Fee: $25 Per m3 </label>
</div>
</div>
<div class="col-md-6 mt-2">
<div class="mb-3">
<input type="checkbox" class="form-check-input" id="delivery" name="deliveryfee" value="50">
<label class="form-check-label" for="exampleCheck1">Delivery Fee: $50 Minimum </label>
</div>
</div>
<div class="col-md-12 mb-3">
<strong class="">
Total Amount: $
</strong>
<input type="number" class="form-control total-amount" id="sum" name="totalsum" disabled>
</div>
<div class="col-md-12">
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>

Answer 2

getting too many id is problematic, use $(document) to select all and use $('#sum').val() to enter the total value.
$(document).change(function(){
var value1 = parseFloat($('#ironbarvalue').val()) || 0;
var value2 = parseFloat($('#redgumvalue').val()) || 0;
var value3 = parseFloat($('#mixedgumvalue').val()) || 0;
var value4 = parseFloat($('#brownbarkvalue').val()) || 0;
var value5 = parseFloat($('#stackfee').val()) || 0;
var value6 = parseFloat($('#delivery').val()) || 0;
$('#sum').val(value1 + value2 + value3 + value4 + value5 + value5);
});