Automatic updating of calculation result in jQuery - javascript

I'm making my first steps in js and jquery and I'm trying to make simple calculation form,
which
takes numeric variable form form in html (sum)
multiplies it by constat multiplier
multiplies result by a number choosen from dropdown list (total)
and does that on the fly, so to say updates result whenever any variable changes.
code below works, but total result does not update when sum updates. what am I missing here?
$('.pow').keyup(function () {
var sum = 0;
var multip = 4;
sum1 = sum;
$('.pow').each(function() {
sum += Number($(this).val())*parseInt(multip);
sum1 = sum;
});
$("#sum").html(sum.toFixed(2)); });
$('.per').click(function () {
var total = 0;
var period = $("#period").val();
$(".per").each(function() {
total = parseInt(sum1)*parseInt(period);
}); $("#sum1").html(total.toFixed(2)); });

working fiddle here
You calculate totals on ( $('.per').click(.....);, so when you type a number above, nothing happens, because the code does not run)
The easier way to do this would be to automate a click after typing a number.
Add this $('.okr').click(); after this line here $("#sum").html(sum.toFixed(2));
Like so:
$("#sum").html(sum.toFixed(2));
$('.per').click();
Assuming you already chose from the dropdown it will be fine, otherwise the dropdown wont have a value to calculate with.
Also, the problem with the dropdown is AS soon as I click it closes, i.e. I cant choose anything. To solve this issue I hold the mouse button down, so the dropdown wont close (this is not normal). The reason is because you do dropdown.click() { dropdown.change() } think about replacing this functinality

Related

How do increment value while it being declared inside function

I have a small issue where i'm trying to increment/decrement the buttons in x steps this is all dynamic dependant on what ever the quantity step is, my code works fine when its increments of one because i am just using ++ there is no scope issue
I've tried a few things but no much luck i can't really declare it outside of the function as there is multiple input boxes and i'd need to do some sort of mapping to know which one relates to which input.
I know what the issue is its because of scoping im defining a variable inside a function but its not a simple thing to do it outside of it any other solutions to get past this without defining it outside ?
When i had it like this this.$refs[codeForRef][0].value++ it worked fine and would increment by one
increment: function(e) {
e.preventDefault();
var codeForRef = e.srcElement.id;
var test = parseInt(this.$refs[codeForRef][0].value, 10); //the value of the qty
test += this.dyQty //whatever it needs to go up in
},
what i understood from your question, this should work for you.
increment: function(e) {
e.preventDefault();
var codeForRef = e.srcElement.id;
var test = parseInt(this.$refs[codeForRef][0].value, 10); //the value of the qty
test += this.dyQty //whatever it needs to go up in
this.$refs[codeForRef][0].value = test;
}

Why does a function that's almost a copy of another fail to update output field?

I'm working on making a PO form that will eventually submit the values to a database. When you look at the code, if you load it, you'll see the line items area. Quantity, Description, Loaction/Use and line total. Everything works great on the first line item, but when filling out the second line item, and the subsequent ones, the line total column doesn't calculate or show any values. The line total field is simple math; quantity * unit price = line total.
Again, the first rown works great. The second row and the others, well, nothing shows up in the line total field to the right and I can't figure out why. The calculations and functions called are all the same, the field IDs are all unique, I'm not getting any errors what so ever. I searched around but didn't find any answers, its an odd one and not sure if I'm searching with the right criteria or not. Here's a link to the page (view source on it to see the code - for now its just simple HTML & Javascript):
http://www.acsout.com/maintenance.html
So when the page loads, 7 of the rows are hidden with this:
document.getElementById('frow3').style.display = 'none';
For each row, to calculate the line total, I'm using this:
function l1calc(){
if (document.getElementById('up1').value != '' && document.getElementById('q1').value != ''){
tot1 = document.getElementById('q1').value * document.getElementById('up1').value;
document.getElementById("lt1").value = parseFloat(Math.round(tot1 * 100) / 100).toFixed(2);
}
}
function l1calc() works fine
The next one, that isn't working, is the same, with different variables:
function l2calc(){
if (document.getElementById('up2').value && document.getElementById('q2').value){
tot2 = parseFloat(document.getElementById('q2').value) * parseFloat(document.getElementById('up2').value);
document.getElementById('lt2').value = tot2;
}
}
The link i posted brings you to the page which will let you view source to see the full code and test it to see what i'm referring to.
If I change (in function l2calc) the last line to be:
document.getElementById('lt1').value = tot2;
then the lt1 field shows the value when the function is triggered. But when it is as it should be for l2calc
document.getElementById('lt2').value = tot2;
the input field lt2 never shows the value, it just stays blank. The same goes for the rest of the fields in the line total column.
This line is wrong in your script (in posubtotal)
if(document.getElementById("lt2").value = null){ // <-- == null
polt2 = 0;
}
I used firebug, and saw the hardcoded 568 in l2calc with a breakpoint, and then saw the value vanish. So I followed the code.

javascript parseFloat bug

I am subtracting multiple textboxes using JavaScript. I'm adding the total amount in the textboxes.When amount is first entered it works fine but when I change the amount and save it again there is a bug.The value is pulled from database the second time and is in "00.00" format.
The problem is when the value is a 4 digit value say "6500.00" it changes to "6.00". It shows as 6500.00 in the webpage but during calculation in JavaScript it calculates as "6.00".it works fine for 3 digit value like "400.50".Can somebody tell me what's the problem here.
JavaScript:
function fill_balance()
{
var total = document.getElementById("total").value;
var payment = document.getElementById("payment").value;
document.getElementById("balance").value = parseFloat(total) - parseFloat(payment);
}
P.S: I use number_format() function to change the format to 00.00

javascript running total adding incorrectly

Hey everyone I'm trying to do a very simple calculation using javascript to find a running total. I seem to be missing something. I did look through SO and found some very similar scenarios but, I can't seem to relate to my own code.
Here is the script I am using to calc my running total.
var total = 0;
function GetTotal(txtBox) {
total += parseInt(txtBox.value) || 0;
$("#chkTotal").html(total);
}
and here is some code from my view:
<div class="editor-field">
#Html.TextBox("FirstDemo", String.Empty, new { id = "firstdemo", onchange = "GetTotal(this)" })
#Html.ValidationMessageFor(model => model.FirstDemo)
</div>
<div>
<h3>Total Checked</h3>
</div>
<div id="chkTotal"></div>
The total calculates perfectly, until a value is changed in a text box, in which case whatever has been entered in the textbox is added again to the running total.
Can anyone help me?
The problem is the global scope of your total variable: I imagine you have several text fields in the form where you set them up to handle the onchage event the same way. The first time you enter something, the value is added correctly to total but the moment you change something in any of the text fields, it adds again the new value. Again, because total has global scope.
You should really move total locally inside the function and re-parse all values in the input elements you are interested in.
Since you are using jquery, you could do something like this instead:
function GetTotal(txtBox) {
var total = 0;
$('input:text').each(function(index, value) {
total += parseInt($(value).val() || 0);
});
$("#chkTotal").html(total);
}​
Here's a jsfiddle demonstrating it for you.
Easiest solution, loop through all the form elements and redo the calculation.
I see jQuery in your code so it is a basic selector that gets the elements and an each loop.
function GetTotal(txtBox) {
var total = 0;
$(".calculationClass").each(
function() {
total += parseInt(this.value,10) || 0;
}
);
$("#chkTotal").html(total);
}

Using jQuery to sum values from a couple text inputs

I have a couple of text inputs and I would like to compute the sum of the values in another input. This must happen on the fly, as soon as the user enters a value in one of the inputs. I'm planning to use jQuery for this, and I would like to add a class name for each input, something like class="input1", class="input2" and so on.
My problem is that I don't know to add all those values, and given the fact that I have over 50 inputs, I don't want to "add them by hand".
Any kind of help is appreciated.
If you decorate all of the inputs you want added together with classes of input1, input2, and so on, this will get the sum of the current values in all those inputs
var sum = 0;
$("input[class *= 'input']").each(function(){
sum += +$(this).val();
});
Then naturally if you want to put this value in an input of id destination
$("#destination").val(sum);
Here's a fiddle
EDIT
If you want this to run whenever any of these textboxes are changed, then you can put this in a change event handler
$(document).on("change", "input[class *= 'input']", function() {
var sum = 0;
$("input[class *= 'input']").each(function(){
sum += +$(this).val();
});
$("#destination").val(sum);
});
Here's that fiddle
EDIT
Per Jaspers comment, if you know that input1, input2, etc, will always be the first class on your inputs, ie, you'll never do
<input class='someNewClass input1'
then you could
$("input[class ^= 'input']").each(function(){
^= means starts with, while *= means contains anywhere.
give them a common name and you need to parse the value since it will be text initially
var result= 0;
$("input[name='sum']").each(function(){
result = result + parseInt($(this).val(),10);
});

Categories