I have inputs with class="amount". The # of inputs is dynamically controlled by the user - but I doubt that is important. I then have an input with id="total"
<form>
<input class="amount">
<input class="amount">
<input class="amount">
<input id="total">
</form>
I would like to sum the values in the inputs with .amount and place that sum with #total. I would like for this calculation to occur as changes happen in any of the ".amount" inputs. I am quite new to the use of JS and I am struggling with the cleanest way to approach solving this use case.
Thanks!
UPDATED ANSWER : You can check by running the snippet here.
$('.amount').on("input", function() {
let total = 0;
$('.amount').each(function() {
total += $(this).val()/1;
})
$('#total').val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input class="amount" placeholder="One"><br/>
<input class="amount" placeholder="Two"><br/>
<input class="amount" placeholder="Three"><br/>
<input id="total" placeholder="Total" readonly>
</form>
HTML
<form id="form_input">
<input class="amount">
<input class="amount">
<input class="amount">
<input id="total">
</form>
Use following Step in j query
$(document).ready(function () {
$('#form_input').on("keyup", ".amount", function () {
var sum = 0;
$('.amount').each(function () {
sum += Number($(this).val());
});
$('#total').val(sum);
});
});
Then use this code in your delete row function
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).closest('tr').remove();
i--;
var sum = 0;
$('.item_price').each(function () {
sum += Number($(this).val());
});
$('#Item_total_price').html(sum);
console.log(sum);
});
Reference
Java script calculation dynamic add row value
Related
Using Jquery I need to add all values of input.
Using jquery each is there any way to use regix in element name
like
items[regix_goes_here][debit]
I need values of all input and I want them incremented using each.
My code
<input name="items[1][debit]" type="number">
<input name="items[341][debit]" type="number">
<input name="items[31][debit]" type="number">
<input name="items[431][debit]" type="number">
First, assign a class to your inputs, for example:
<input class="js-inc" name="items[1][debit]" type="number">
<input class="js-inc" name="items[341][debit]" type="number">
<input class="js-inc" name="items[31][debit]" type="number">
<input class="js-inc" name="items[431][debit]" type="number">
Now you can increment all of them, without even jquery. Use .value to access the value as a string. Use Number("..") to convert it to a number. Add one to it, and assign it back.
var inputs = document.querySelectorAll("input.js-inc")
inputs.forEach(function(input) {
input.value = Number(input.value) + 1
})
Here's a live example
If you want to sum all the values of inputs with name="items[X][Y]", you can filter them by testing if their name attribute matches this /items\[\d+\]\[debit\]/ Regex.
This is how should be your code:
var sum = 0;
$('input[type="button"]').click(function() {
$('input').each(function() {
if ($(this).attr('name') && $(this).attr('name').match(/items\[\d+\]\[debit\]/)) {
sum += $(this).val() ? parseInt($(this).val()) : 0;
}
});
console.log(sum);
});
Demo:
var sum = 0;
$('input[type="button"]').click(function() {
$('input').each(function() {
if ($(this).attr('name') && $(this).attr('name').match(/items\[\d+\]\[debit\]/)) {
sum += $(this).val() ? parseInt($(this).val()) : 0;
}
});
console.log(sum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="items[1][debit]" type="number" value="2">
<input name="items[341][debit]" type="number" value="2">
<input name="items[31][debit]" type="number" value="2">
<input name="items[431][debit]" type="number" value="2">
<input type="button" value="SUM" />
I recently have a result in a modal from calculatesum JavaScript displayed as <span id="sample">0</span> (the value will increase based on the number key in by users)
How do I display this final sample value in another input box outside of the modal? Help?
JavaScript as below:
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(0));
}
HTML or rangeslide code as below:
<input type="text" class="form-control slider-text-field" id="homeContentInput" placeholder="250,000">
</td><td> (RM)</td></tr></table>
<br/>
<input type="range" value="250000" min="15000" max="500000" step="10000" id="homeContentRange">
<span class="slider-label-min">RM 15,000</span> <span class="slider-label-max">RM 500,000</span>
Basically, I need to replace placeholder="250,000" for the first input box and value="250000" with the final value from <span id="sample">0</span>.
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function() {
calculateSum();
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
//$("#sum").html(sum.toFixed(0));
$("#homeContentInput").val(sum.toFixed(0));
$("#homeContentRange").val(sum.toFixed(0));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
*****************************************************************
<br>if you just want to add up the values then this will work, else you need to be more clear with your question.
<br>form2-1:
<input class="txt" type="text" id="form2-1" value="0">
<br>form2-2:
<input class="txt" type="text" id="form2-2" value="0">
<br>form2-3:
<input class="txt" type="text" id="form2-3" value="0">
<br>Not sure what you want to do bellow this... *****************************************************************
<br>
<input type="text" class="form-control slider-text-field" id="homeContentInput" placeholder="250,000">(RM)
<br>
<input type="range" value="250000" min="15000" max="500000" step="10000" id="homeContentRange">
<br>
<span class="slider-label-min">RM 15,000</span> <span class="slider-label-max ">RM 500,000</span>
<br>*****************************************************************
Not sure if I understand this right but I think you want something along these lines?
I assume you want
the first field readonly
the second field as the slider
on submit calculates the total, in which you can post the results in another div.. In your case a modal.
Place the result where ever you like
<p id="result"> </p>
<input id="value1" type="text" value="250000" readonly="readonly"/>
<span> + </span>
<input id="value2" type="text" id="textInput" value="15000">
<span class="slider-label-min">RM 15,000</span> <span class="slider-label-max">RM 500,000</span>
<input type="submit" onclick="output();">
<p id="result"> </p>
<input type="range" type="range" value="250000" min="15000" max="500000" step="10000" onchange="updateTextInput(this.value);">
<script type="text/javascript" language="javascript" charset="utf-8">
function output(){
var value1 = document.getElementById('value1').value;
var value2 = document.getElementById('value2').value;
document.getElementById('result').innerHTML = parseInt(value1) + parseInt(value2);
}
function updateTextInput(val) {
document.getElementById('value2').value=val;
}
</script>
I'm trying to do a simple calculation onblur with arrays but it's not firing. If I change it to a span or div it works fine. Why isn't it working with an input field?
I need it to be an input field because it's easier to store the values in a database.
<input type="text" class="input-small" name="partnumber[]">
<input type="text" class="input-small" name="partdescription[]" >
<input type="text" class="input-small" name="partprice[]" onblur="doCalc(); calculate(); ">
<input type="text" class="input-small" name="partquantity[]" onblur="doCalc(); calculate(); ">
<input type="text" readonly class="input-small parttotal" name="parttotal[]" >
Calculation
function doCalc() {
var total = 0;
$('tr').each(function() {
$(this).find('.parttotal').html($('input:eq(2)', this).val() * $('input:eq(3)', this).val());
});
$('.parttotal').each(function() {
total += parseInt($(this).text(),10);
});
}
Firstly, I wouldn't use inline events.. Here I've used delegated events, an advantage here if you dynamically add any more lines, it will still work..
Next make sure each line has some sort of wrapper for each line, here I've used a simple DIV. Yousr might be your TR..
The rest then becomes easy, as can be seen here, this example I've just included the price, qty & total, and done 2 lines for testing..
function calc() {
var h = $(this).closest('div');
var qty = h.find('[name="partquantity[]"]');
var price = h.find('[name="partprice[]"]');
var total = h.find('[name="parttotal[]"]');
total.val(qty.val() * price.val());
}
$('body').on('blur', '[name="partprice[]"],[name="partquantity[]"]', calc);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" class="input-small" name="partprice[]">
<input type="text" class="input-small" name="partquantity[]">
<input type="text" readonly class="input-small parttotal" name="parttotal[]" >
</div>
<div>
<input type="text" class="input-small" name="partprice[]">
<input type="text" class="input-small" name="partquantity[]">
<input type="text" readonly class="input-small parttotal" name="parttotal[]" >
</div>
you can't use .html() to set the value of a textbox.
Change this line:
$(this).find('.parttotal').html($('input:eq(2)', this).val() * $('input:eq(3)', this).val());
to
$(this).find('.parttotal').val($('input:eq(2)', this).val() * $('input:eq(3)', this).val());
Note the change ('.parttotal').html becomes ('.parttotal').val
Using jQuery, I have float values in fields with similar class names "score"and I just want to make a function that will add all float values in those fields and assign the result to "field5".
<input id="field1" type="text" class="score">2.5</input>
<input id="field2" type="text" class="score">6.02</input>
<input id="field3" type="text" class="score">1</input>
<input id="field4" type="text" class="score">4.03</input>
<input id="result" type="text" class="result"></input>
I made the script below but it doesn't work even though the function executes.
$(.score).on('change',function(){
var total = 0
$(this).each(function(){
total += this.value;
});
});
$('#result').val(total);
});
Lot of issues in your code:
JS:
$(".score").on('keyup', function () {
var total = 0
$(".score").each(function () {
total += parseFloat(this.value);
});
$('#result').val(total);
});
HTML
<input id="field1" type="text" class="score" value="1"/>
<input id="field2" type="text" class="score" value="1.2"/>
<input id="field3" type="text" class="score" value="1.4"/>
<input id="field4" type="text" class="score" value="3.1"/>
<input id="result" type="text" class="result" value=""/>
Demo: http://jsfiddle.net/GCu2D/839/
input is a self closing tag. You should use it like in this example
You should iterate on $(".score") instead of $(this) to get all input values. Latter will give only the current input's value.
Use parseFloat to convert the string type into float. By default you get string value from the .value. In order to add them, you need to convert them to float
Your selector $(.score) is invalid. Use $(".score") .
$('#result').val(total); should be inside the event handler.
First of all, I believe .change() is used with dropdowns. Try using .keydown() to detect a change in an input box.
There are a few errors in your code -
var total = 0;
Semicolon is missing.
$('#result').val(total);
This will assign the value and will not show it. If you wish to display teh value as well, use
$('#result').append(total);
$(document).ready(function(){
$(".score").on('change',function(){
var total = 0.00;
$(".score").each(function(){
if(undefined != $(this).val() && "" != $.trim($(this).val()))
total += parseFloat($(this).val());
});
$('#result').val(total);
});
});
I finally figured it out. Thanks guys!
function getResult(){
var total = 0;
$('.score').each(function(){
var checkval= parseFloat(this.value);
if(!isNaN(checkval)) total += checkval;
});
$('#result').val(total.toFixed(2));
}
I have dynamic form like:
<form id="formaa">
<div class="row">
<input type="text" name="item" class="item"></input>
<input type="text" name="quant" class="quant"></input>
<input type="text" name="price" class="price" onkeyup="update();"></input>
<input type="text" name="sum" id="suma" size="10" disabled="disabled"/>
</div>
<div class="row">
<input type="text" name="item" class="item"></input>
<input type="text" name="quant" class="quant"></input>
<input type="text" name="price" class="price" onkeyup="update();"></input>
<input type="text" name="sum" id="suma" size="10" disabled="disabled"/>
</div>
<!-- ... many more rows -->
<input type="text" disabled id="total" name="tot"></input>
</form>
What I'm trying to do is multiply item quantity and price and get total sum in sum field for each item seperately (not all items total sum).
What I have achiecved is this function, but it seems counting total sum of all items together not seperately and this working with first default field row, when I add new set of fields and fill them with information both, fields (and other later added) sum values become NaN..If I remove all added field sets and leave the first form fows set, number is working again.. What is the problem here?
<script type="text/javascript">
function update() {
var total = 0;
$("#formaa div.row").each(function(i,o){
total += $(o).find(".quant").val() *
$(o).find(".price").val();
if(!isNaN(total) && total.length!=0) {
sum += parseFloat(total);
}
});
$("#formaa div.row #suma").val(total);
}
</script>
function update() {
$("#formaa div.row").each(function(i,o){
var total = $(o).find(".quant").val() * $(o).find(".price").val();
if(!isNaN(total) && total.length!=0) {
sum += parseFloat(total);
}
$(o).find('[name="sum"]').val(total);
});
}
A few problems in your code :
never give the same id to more than one element. That's the reason why I defined the selector on the name
you weren't resetting the total, so it was the sum of all
I didn't fix that, but your operation before the float parsing is strange (it may depend on the content that I can't see)