I want to push calculate sum those after Line total: display in input not in text.
I try add some input for example:
<input id="totalline" name="totalline" value="" />
and change this:
var calculate = function(el) {
var percent = el.find('input[name="percent[]"]').val();
var additional = el.find('input[name="additional[]"]').val();
var total = el.find('span.total');
var totalValue = ($("#weight").val() * percent / (100 - additional)).toFixed(2);
total.text(totalValue);
}
to this:
var calculate = function(el) {
var percent = el.find('input[name="percent[]"]').val();
var additional = el.find('input[name="additional[]"]').val();
var total = el.find('span.total');
var totalValue = ($("#weight").val() * percent / (100 - additional)).toFixed(2);
$('#totalline').val(totalValue); //<-this line changed
}
But this is not work like I want to.
Here is my fiddle.
You are trying to use an ID selector when there will be multiple elements with the same ID on the page (when you press the + button to add a new row). Simply change your selector to var total = el.find("[name='totalline']"); to ensure that you are always grabbing the correct input.
This is what it should look like:
HTML
Line total: <input name="totalline" value="" />
JS
var calculate = function(el) {
var percent = el.find('input[name="percent[]"]').val();
var additional = el.find('input[name="additional[]"]').val();
var total = el.find("[name='totalline']");
var totalValue = ($("#weight").val() * percent / (100 - additional)).toFixed(2);
total.val(totalValue);
}
Related
Does anyone know why I'm getting a value NaN in the vat input box? When I enter a value of qty it always gives me a NaN value.
$('#sales_qty').keyup(function(){
var qty = parseFloat($('#sales_qty').val()) || 0;
var sub_total = parseFloat($('#sales_sub_total').val()) || 0;
var vat = 0.12;
var sales_total = $('#sales_total').val((qty * sub_total).toFixed(2));
$('#sales_vat').val((sales_total * vat).toFixed(2));
});
JSFiddle: https://jsfiddle.net/yv6zks1g/
Because sales_total is the element itself, (not the value). you should add another val() at the end to get the value.
$('#sales_qty').keyup(function(){
var qty = parseFloat($('#sales_qty').val()) || 0;
var sub_total = parseFloat($('#sales_sub_total').val()) || 0;
var vat = 0.12;
var sales_total = $('#sales_total').val((qty * sub_total).toFixed(2)).val();
$('#sales_vat').val((sales_total * vat).toFixed(2));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="sales_qty" type="text" placeholder="sales_qty" />
<input id="sales_sub_total" type="text" placeholder="sales_sub_total" />
<input id="sales_total" type="text" placeholder="sales_total" />
<input id="sales_vat" type="text" placeholder="sales_vat"/>
i think its because of the var sales_total = $('#sales_total').val((qty * sub_total).toFixed(2)); line.
instead of $('#sales_total').val((qty * sub_total).toFixed(2));
add var sales_total = (qty * sub_total).toFixed(2);
As in these two lines you are parsing float value from your input elements,
var qty = parseFloat($('#sales_qty').val()) || 0;
var sub_total = parseFloat($('#sales_sub_total').val()) || 0;
You need to set your inputs like these,
<input id="sales_qty" type="number" />
<input id="sales_sub_total" type="number" />
So that it is not possible to enter anything other than number. This will get you rid of the NaN problem.
Also you need to put
var sales_total = $('#sales_total').val((qty * sub_total).toFixed(2)).val()
Its because you are not getting the real value of sales total input and you are just assigning a new value for it. On this line
var sales_total = $('#sales_total').val((qty * sub_total).toFixed(2));
To fix it you have to get again the value of sales total input by using the val() method. Your code should look like this
$('#sales_qty').keyup(function(){
var qty = parseFloat($('#sales_qty').val()) || 0;
var sub_total = parseFloat($('#sales_sub_total').val()) || 0;
var vat = 0.12;
$('#sales_total').val((qty * sub_total).toFixed(2)); // assign the value
var sales_total = $('#sales_total').val() // grab the value
$('#sales_vat').val((sales_total * vat).toFixed(2));
});
I have a list of records in a table in my view that has a calculated column.
From the image, the column in question is the Mark-Up column, and its value is generated/calculated from Price, Casecost and Casesize. This column is only visual for the user and will never be saved in db/table. Value is calculated when page is loaded (next/previous for more than 10 rows). For each page on with the records its only calculating the value on the first row as seen in the picture.
CSHTML I have
#Html.TextBox("q_markup", null, new { #class = "calc markupclass", #readonly = "readonly" })
Javascript
function calculate() {
//Fields that are used for calculations (declare variables)
var casecost = parseFloat($('#item_q_casecost').val());
var casesize = parseFloat($('#item_q_casesize').val());
var price = parseFloat($('#item_q_sellprice').val());
//calculations
var unitcost = casecost / casesize;
var markup = ((price - unitcost) / unitcost) * 100;
//put calculated value into field
$('#q_markup').val(markup.toFixed(2));
}
$(document).ready(function () {
calculate();
});
What I have since tried is to have a loop in my calculate function in the following manner without any success
function calculate() {
//gather all markup fields on page
var rows = document.getElementsByClassName("markupclass");
//cycle through each rows and calculate
for (i = 0; i < rows.length; i++) {
//do my calculations here
}
}
How can I get this calculate that field for all rows?
Not exactly sure, but you could try fixing your for loop
function calculate() {
//gather all markup fields on page
var rows = document.getElementsByClassName("markupclass");
//ADDED - middle conditional - cycle through each rows and calculate
for (i = 0; i < rows.length; i++) {
//do my calculations here
}
}
This is how I managed to solve this for anyone who comes across this issue
First with the Table I have (Note: class 'searchTable')
<table id="ListTable" class="table searchTable">
<tr>
Looping through the rows and getting the required values for each field
function calculate() {
$('.searchTable tr').each(function () {
//Fields that are used for calculations (declared variables)
var casecost = $(this).find('#item_q_casecost').val();
var casesize = $(this).find('#item_q_casesize').val();
var price = $(this).find('#item_q_sellprice').val();
var vat = $(this).find('#item_viewVat').val();
//calculations - PREREQUISITES
var unitcost = casecost / casesize;
var profit = (price - unitcost) - ((vat / 100) * price);
//calculations - FIELD VALUES
var markup = ((price - unitcost) / unitcost) * 100;
var gprofit = (profit / price) * 100;
//assign calculated values to table fields (columns)
$(this).find('#q_markup').val(markup.toFixed(2));
$(this).find('#q_grossprofit').val(gprofit.toFixed(2));
});
}
GP and Mark-Up are the calculated field columns (in image)
I am trying to set up a way so that if my total cart's price is under $125, it will charge $125. I have googled multiple ways of getting the order minimum added but nothing works with how this code was set up. Please view the code below:
function Recalculate() {
var total = 0;
$.each(cart, function(index, item) {
var options = {};
if (item.o) $.each(item.o, function(opt_ind, opt_item) {
options[opt_item.name] = opt_item.value;
options[opt_item.id] = opt_item.value;
});
var width_ft = parseInt(options.width_ft);
if (!width_ft || isNaN(width_ft)) width_ft = 0;
var width_in = parseInt(options.width_in);
if (!width_in || isNaN(width_in)) width_in = 0;
var width = width_ft + width_in / 12;
var length_ft = parseInt(options.length_ft);
if (!length_ft || isNaN(length_ft)) length_ft = 0;
var length_in = parseInt(options.length_in);
if (!length_in || isNaN(length_in)) length_in = 0;
var sq = width * length;
var inshop = options.type_of_cleaning == 'In_Shop_Cleaning';
var base_price = 0;
var base_min = 0;
switch (item.p) {
case 'livingroom':
base_price = LIVING_ROOM;
break;
case 'stair':
base_price = STAIR;
break;
}
var i_total = sq * base_price;
if (i_total < base_min) i_total = base_min;
$('span.isize').eq(index).html('$' + i_total.toFixed(2));
total += i_total;
if (options.SCOTCHGARD == 'on') total += Math.min(sq * SCOTCHGARD, 25.00);
if (options.DECON == 'on') total += Math.min(sq * DECON, 25.00);
if (options.DA == 'on') total += Math.min(sq * DA, 25.00);
if (options.clean_or_buy == 'buy') total += i_total * NEW_PAD_TAX / 100;
});
return [total];
}
If you want to charge a minimum of $125, the simplest thing you could do is simply set the total to that minimum just before you return it. e.g.
if (total < 125) { total = 125; }
return total;
(Note that this is returning total not [total], as it is not clear to me why you want an array of a single value returned.)
Your question includes the phrase "...getting the order minimum added". That doesn't make sense to me, i.e. if the real total is $100, I doubt that you want to add $125 (to make $225 total), but rather you simply want to set the total to the minimum. If that is correct, but you do want to keep track of the extra that you add, then perhaps you could do the following, again right before you return from the function:
var extraForMinimum = 0;
if (total < 125) { extraForMinimum = 125 - total; }
return {total: total, extraForMinimum: extraForMinimum };
In this case, the function is returning an object that contains both the actual total (which could still be less than $125) as well as the extra cost that is required to bring the charge up to the minimum. If you are doing this, however, you might want to change the variable name from total to, say, subtotal or something else similar.
I want to be able to take the value from the calcOrderTotal input and then divide it and display the divided output in another input (for example, to show the Order Total price, and then what the order total 36 monthly lease price would be). I sort of attempted to do it with the "calc36Month" function, but I know it's not right.
function calcOrderTotal() {
var orderTotal = 0;
var productSubtotal = $("#product-subtotal").val() || 0;
var serverPrice = $('.server-radio:checked').val() || 0;
var equipmentPrice = $('.equipment-radio:checked').val() || 0;
var underTotal = $("#under-box").val() || 0;
var orderTotal = parseFloat(CleanNumber(productSubtotal)) + parseFloat(CleanNumber(serverPrice)) + parseFloat(CleanNumber(equipmentPrice));
$("#order-total").val(CommaFormatted(orderTotal));
$("#fc-price").attr("value", orderTotal);
}
The calcOrderTotal function is then redirected to this HTML input and displays a dollar value (this does work):
<input type="text" class="total-box" value="$0" id="order-total" disabled="disabled" name="order-total"></input>
I want to be able to take the OrderTotal dollar value and divide it by 36 months and input the 36 month lease value into another input. Here is an example of what I'm looking for (I know this does not work):
function calc36Month() {
var 36Month = 0;
var orderTotal = $("#order-total").val() || 0;
var 36Month = parseFloat(CleanNumber(orderTotal)) / 36;
$("#36-monthly-total").val(CommaFormatted(36Month));
$("#fc-price").attr("value", 36Month);
}
How can I do this?
Here ya go:
function calcOrderTotal() {
var orderTotal = 0;
var productSubtotal = $("#product-subtotal").val() || 0;
var serverPrice = $('.server-radio:checked').val() || 0;
var equipmentPrice = $('.equipment-radio:checked').val() || 0;
var underTotal = $("#under-box").val() || 0;
var orderTotal = parseFloat(CleanNumber(productSubtotal)) + parseFloat(CleanNumber(serverPrice)) + parseFloat(CleanNumber(equipmentPrice));
$("#order-total").val(CommaFormatted(orderTotal));
$("#fc-price").attr("value", orderTotal);
if (orderTotal > 0) {
calcMonthly(orderTotal);
}
}
EDIT: Edited per request.
function calcMonthly(total) {
var pmt1 = total / 36;
var pmt2 = total / 24;
var pmt3 = total / 12;
$("#monthly-36").val(CommaFormatted(pmt1));
$("#monthly-24").val(CommaFormatted(pmt2));
$("#monthly-12").val(CommaFormatted(pmt3));
//$("#fc-price").attr("value", pmt1); // what is the purpose of this?
}
Avoid using numeric digits as variable names, element ID's or CSS classes, or beginning any of the aforementioned references with a number. Begin all variable names, ID's and classes with a letter.
A) .originalData is a textarea
B) .changedData is also a textarea but this is were I will be making the changes
How could I calculate a percentage of the values changed in B starting at 0%?
jQuery:
var changed, original = $(".originalData").val() $(".changedData").change(function(){ changed = $(this).val(); });
if you want to calculate the percent of changes i guess you have to do something like this
var changedData = $('.changedData').val().length;
var originalData = $('.changedData').val().length;
var precentageOfChange = changedData/originalData * 100 - 100
$('.mydiv').append(precentageOfChange);
$('.changedData').change(function(){
var original = $('.originalData').val();
var changed = $(this).val();
var changed = changed / original * 100 - 100;
});