I am working with dynamic textboxes. With this dynamic textboxes I want to perform a calculation:
The calculation is simple. I want to calculate the total value of the textboxes.
In my example I am using 3 textboxes with the ids:value1,value2andvalue3`.
The calculation I want to make is:
value1 + value2 + value3 = total
In my javascript I dont want to define all these values becouse the possible ids numbers are unlimited.
So my question is. How can I get the total count of the values without defining each ID.
Here is my script:
Items:<br />
<input type="text" name="value[]" id="value1" placeholder="Value 1" onChange="getPrice(this.value)" /> <br />
<input type="text" name="value[]" id="value2" placeholder="Value 2" onChange="getPrice(this.value)" /> <br />
<input type="text" name="value[]" id="value3" placeholder="Value 3" onChange="getPrice(this.value)"/> <br />
<br />
Total: <br />
<input type="text" name="total" id="total" placeholder="Total"/> <br />
<script>
function getPrice() {
var numVal1 = Number(document.getElementById("value").value);
var totalValue = numVal1;
document.getElementById("total").value = totalValue.toFixed(2);
}
</script>
Example: http://jsfiddle.net/8vhot05u/
You could go over all value[] inputs and sum them up:
let total = 0;
for(const el of document.getElementsByName("value[]"))
total += +el.value;
document.getElementById("total").value = total;
Related
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 />
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
I'm trying to get a running total of values added together when a user selects a radio button. Currently it's just coming back as blank. Here's what I've got so far:
<script type="text/javascript">
function findTotal(){
var ntot = 0
var a = document.getElementsByName('ur').val();
var b = document.getElementsByName('haem').val();
var c = document.getElementsByName('haew').val();
var d = document.getElementsByName('syb').val();
var e = document.getElementsByName('orm').val();
var tot= ntot + a + b + c + d + e;
document.getElementById('total').value = tot;
}
</script>
And a cut down amount of radio buttons for example:
0 <input type="radio" name="ur" value="0" id="ur1" class="radi" onclick="findTotal()"/> <br />
2 <input type="radio" name="ur" value="2" id="ur2" class="radi" onclick="findTotal()"/> <br />
0 <input type="radio" name="haem" value="0" id="haem1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="haem" value="1" id="haem2" class="radi" onclick="findTotal()"/> <br />
0 <input type="radio" name="haew" value="0" id="haew1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="haew" value="1" id="haew2" class="radi" onclick="findTotal()" /> <br />
0 <input type="radio" name="syb" value="0" id="syb1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="syb" value="1" id="syb2" class="radi" onclick="findTotal()"/> <br />
0 <input type="radio" name="orm" value="0" id="orm1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="orm" value="1" id="orm2" class="radi" onclick="findTotal()"/> <br />
Total: <input type="text" name="total" id="total"/>
Any help would be much appreciated.
getElementsByName(), as implied by the "s" in "elements", returns a list of elements. And that list doesn't have a .val() method or a .value property, nor does it select just the checked items.
But this is easy to do with jQuery. Remove all the inline onclick= handlers, then just bind the click handler with jQuery based on the common class.
You can quickly grab the checked radio buttons by using the :checked selector, then loop through them using the .each() method. I'm using the unary plus operator to convert the string values from the value attributes to numbers so that they can be added together.
$(".radi").click(function() {
var total = 0;
$(".radi:checked").each(function() { total += +this.value; });
$("#total").val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
0 <input type="radio" name="ur" value="0" id="ur1" class="radi"/> <br />
2 <input type="radio" name="ur" value="2" id="ur2" class="radi"/> <br />
0 <input type="radio" name="haem" value="0" id="haem1" class="radi"/><br />
1 <input type="radio" name="haem" value="1" id="haem2" class="radi"/> <br />
0 <input type="radio" name="haew" value="0" id="haew1" class="radi"/><br />
1 <input type="radio" name="haew" value="1" id="haew2" class="radi" /> <br />
0 <input type="radio" name="syb" value="0" id="syb1" class="radi"/><br />
1 <input type="radio" name="syb" value="1" id="syb2" class="radi"/> <br />
0 <input type="radio" name="orm" value="0" id="orm1" class="radi"/><br />
1 <input type="radio" name="orm" value="1" id="orm2" class="radi" /> <br />
Total: <input type="text" name="total" id="total"/>
You can get the checked radio buttons by using the :checked attribute. Then loop through them to add the values.
$(".radi").click(function() {
var total = 0;
$(".radi:checked").each(function() {
total += parseInt($(this).val());
})
$("#total").val(total);
});
Fiddle
Note: instead of writing the inline functions, you can use the jquery event binding.
Possibly a lot less elegant that the other solutions that have just popped up, but this shows how to convert your original function to get the value of each radio button input group with the jQuery .val() method.
<script type="text/javascript">
function findTotal(){
var ntot = 0
var a = $("input:radio[name ='ur']:checked").val();
var b = $("input:radio[name ='haem']:checked").val();
var c = $("input:radio[name ='haew']:checked").val();
var d = $("input:radio[name ='syb']:checked").val();
var e = $("input:radio[name ='orm']:checked").val();
var tot= ntot + a + b + c + d + e;
document.getElementById('total').value = tot;
}
</script>
I understand this may be a repeat question but I have been searching for ages and cant figure out why this isnt working.
I have 3 input fields, Subtotal, Vat and Total: I want to be able to populate the VAT and Total inpur fields with values when there is a value inputted in Subtotal and to show 2 decimal palces after. So:
4 would be 4.00
4.5 would be 4.50
HTML code for the input field:
<input name="subtotal" id="subtotal" type="number" maxlength="20" min="0" placeholder="00.00" onchange="vatCalculation();" />
<input name="vat" id="vat" type="number" maxlength="20" min="0" placeholder="00.00" readonly="true" />
<input name="total" id="total" type="number" maxlength="20" min="0" placeholder="00.00" readonly="true" />
And the javascript code I have at the moment is:
function vatCalculation() {
var subtotal = document.getElementById('subtotal').value;
var vat = parseFloat(parseFloat(subtotal) * parseFloat(0.2)).toFixed(2);
var total = parseFloat(parseFloat(subtotal) + parseFloat(vat)).toFixed(2);
document.getElementById('vat').value = vat;
document.getElementById('total').value = total;
}
I cant see where I am going wrong. When I enter 10 in the 'subtotal'input field the 'VAT' and 'Total' fields change to 2 and 12. But I want them to show 2.00 and 12.00. Screenshot below:
SOLUTION:
When using Firefox the input field of type="number" dont seem to work with javascript calculation. Workaround is to change it to a type="text" Like J Santosh as mentioned below and it works.
Found the issue . It is with <input type='number'> you change it to <input type='text'>
Working Fiddle
Input Type Number is not accepting decimals
Reference -1
Reference-2
Is this what you want? If so, you were pretty close. You just needed to add
document.getElementById('subtotal').value = parseFloat(subtotal).toFixed(2);
to your code as well.
function vatCalculation() {
var subtotal = document.getElementById('subtotal').value;
var vat = parseFloat(parseFloat(subtotal) * parseFloat(0.2)).toFixed(2);
var total = parseFloat(parseFloat(subtotal) + parseFloat(vat)).toFixed(2);
document.getElementById('subtotal').value = parseFloat(subtotal).toFixed(2);
document.getElementById('vat').value = vat;
document.getElementById('total').value = total;
}
<input name="subtotal" id="subtotal" type="text" maxlength="20" min="0" placeholder="00.00" onchange="vatCalculation();" />
<input name="vat" id="vat" type="text" maxlength="20" min="0" placeholder="00.00" readonly="true" />
<input name="total" id="total" type="text" maxlength="20" min="0" placeholder="00.00" readonly="true" />
(2.399).toFixed(2); will give you 2.40
But if you need 2.39 try
parseInt(2.399 * 100)/100
I am having a problem with my math function below. The depreciationFee variable adds up correctly, but for some odd reason the financeFee variable does not. I am trying to calculate the monthly lease payment of a vehicle. Whenever I submit the numbers for financeFee it shows two number appended to each other rather than added together. Is there a reason the numbers aren't adding up correctly?
$(".submit").click(function() {
function calculateLease() {
var capitalCost = $(".capital-cost").val();
var downPayment = $(".down-payment").val();
var residualCost = $(".residual-cost").val();
var monthTerm = $(".month-term").val();
var moneyFactor = $(".money-factor").val();
var depreciationFee = (((capitalCost - downPayment) - residualCost) / monthTerm);
// THIS IS THE ONE THAT DOESN'T WORK
var financeFee = ((capitalCost - downPayment) + residualCost);
alert(financeFee);
}
calculateLease();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lease-calculator-container">
<h3>LEASE CALCULATOR</h3>
<form method="get">
<input type="text" class="capital-cost" placeholder="MSRP" />
<br />
<input type="text" class="down-payment" placeholder="DOWN PAYMENT" />
<br />
<input type="text" class="residual-cost" placeholder="RESIDUAL" />
<br />
<input type="text" class="month-term" placeholder="TERM IN MONTHS" />
<br />
<input type="text" class="money-factor" placeholder="MONEY FACTOR" />
<br />
</form>
<input type="submit" class="submit" value="CALCULATE" />
<div class="monthly-cost"></div>
<div class="total-cost"></div>
</div>
Do a parseInt(value,10) for intergers or parseFloat(value) for float.
JavaScript appends the values if the data type is not a number.