Each time I check any checkbox, I want to multiply the data-price attribute with the value of the input field associated with the checkbox. I need to calculate the sum of all these multiplications.
HTML:
<input class="selectproduct" type="checkbox" name="item0" data-price="5"/>First
<input type="text" class="qty0" name="qty0"/>
<br/>
<input class="selectproduct" type="checkbox" name="item1" data-price="7"/>Second
<input type="text" class="qty1" name="qty1"/>
<br/>
Total Price: $<span class="price">0</span>
JS:
$('.selectproduct').on("change", function () {
var totalPrice = 0;
$('.selectproduct:checked').each(function () {
totalPrice += parseInt($(this).data('price'), 10);
});
$('.price').html(totalPrice);
});
I'm currently able to sum the price according to the checkbox but I can't figure out how to multiply it with the associated input field whenever there is a change. How do I constantly update the sum whenever the input field changes?
Here's the fiddle: https://jsfiddle.net/600rzptn/
You can do it like following.
$('.selectproduct').change(function() {
var totalPrice = 0;
$('.selectproduct:checked').each(function() {
totalPrice += $(this).data('price') * $(this).next('input').val();
});
$('.price').html(totalPrice);
});
//to change total price on changing textbox value
$('input[type="text"]').keyup(function() {
$('.selectproduct:first').change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="selectproduct" type="checkbox" name="item0" data-price="5" />First
<input type="text" name="qty0" />
<br/>
<input class="selectproduct" type="checkbox" name="item1" data-price="7" />Second
<input type="text" name="qty1" />
<br/>
Total Price: $<span class="price">0</span>
Change your calculation line to:
totalPrice += parseInt($(this).data('price'), 10) * $(this).next().val();
jsFiddle example
Related
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
I have many textboxes in a form where I am inserting numeric values and getting total of all the fields. There are 4 total textboxes and 1 grandtotal textbox. Currently I am able to get all the total textboxes values but, I am confused how to get sum of all the total textbox values in the Grand total textbox using Jquery or javascript.
Here is my html and js in a fiddle
Do let me know how to do this
Just set the value of the textbox to the result of adding the other values:
document.getElementById("grand-textbox-id").value = value1 + value2 + value3;
If you want to make it do it automatically, add a change event handler to all the inputs:
var calculateSum = function() {
document.getElementById("grand-textbox-id").value = value1 + value2 + value3;
};
document.getElementById("input-1").onchange = calculateSum;
document.getElementById("input-2").onchange = calculateSum;
document.getElementById("input-3").onchange = calculateSum;
Please Try Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".total").keyup(function(){
var first=0,second=0,third=0,fourth=0;
if($("#text1").val()!="")
{
first=$("#text1").val();
}
if($("#text2").val()!="")
{
second=$("#text2").val();
}
if($("#text3").val()!="")
{
third=$("#text3").val();
}
if($("#text4").val()!="")
{
fourth=$("#text4").val();
}
$("#grand").val( parseInt(first)+ parseInt(second)+ parseInt(third)+ parseInt(fourth));
});
});
</script>
<style tupe="text/css">
.total
{
}
</style>
First val <input type="text" class="total" id="text1" value="" /><br />
second val <input type="text" class="total" id="text2" value="" /><br />
Third val <input type="text" class="total" id="text3" value="" /><br />
Fourth val <input type="text" class="total" id="text4" value="" /><br />
Grand val <input type="text" class="" id="grand" value="" readonly />
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 am having difficult displaying the contents of a variable in a total input field. Basically this code is functioning which is great:
<script>
$(function() {
$('#product-unit-val, #total-unit-sales, #number-reps').change(function() {
var total = parseInt($("#product-unit-val").val()) *
parseInt($("#total-unit-sales").val()) *
parseInt($("#number-reps").val());
if (!isNaN(total)) {
$("#sales-val").html(total);
}
});
});
</script>
Average product unit value <input type="text" id="product-unit-val" /><br/>
Total unit sales value <input type="text" id="total-unit-sales" /><br/>
Number of reps <input type="text" id="number-reps" /><br/>
Total sales value <span id="sales-val"></span>$
However I want to display the total value in an input field like:
<script>
$(function() {
$('#product-unit-val, #total-unit-sales, #number-reps').change(function() {
var total = parseInt($("#product-unit-val").val()) *
parseInt($("#total-unit-sales").val()) *
parseInt($("#number-reps").val());
if (!isNaN(total)) {
$("#sales-val").html(total);
}
});
});
</script>
Average product unit value <input type="text" id="product-unit-val" /><br/>
Total unit sales value <input type="text" id="total-unit-sales" /><br/>
Number of reps <input type="text" id="number-reps" /><br/>
Total sales value <input type ="text" id="sales-val"/>
Am I missing the obvious? I just can't seem to get this working.
Many Thanks
Use val to change the value of an input :
$("#sales-val").val(total);
But be careful with parseInt, always specify the radix :
parseInt('09') == 0
parseInt('09', 10) == 9
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)