We Keep Coding

Pass var and refresh Div on blur

I have the following code, the alert works fine. the div refreshes fine, the var is not returned what am I missing, thanks
$('.cap_per_day').blur(function () {
var sum = 0;
var remaining = 0;
$('.cap_per_day').each(function() {
if ($(this).val() != "") {
sum += parseFloat($(this).val());
remaining = total - sum;
}
});
//alert('Total Remaining '+ remaining);
$(document.getElementById('div.alert-div')).innerHTML = remaining;
$("div.alert-div").fadeIn(300).delay(2000).fadeOut(400);
});

It's not clear exactly what the problem you're trying to solve is, however from your code sample I can tell you that a jQuery object doesn't have an innerHTML property, and the 'id' selector looks more like a class. Try this instead:
$('div.alert-div').html(remaining);

Data-price error with trailing zero's

I have a simple jquery script that allows users to see total prices for the services they select on a form via checkboxes.
The price calculator is simple and works alright. However, whenever there is a trailing zero on the end of a price (ex. 14.90) it does not calculate and instead concats to the end of the price (rather it's default or other prices are selected). Is there another method to use in this situation?
Here is the issue:
https://jsfiddle.net/tn5xtfss/
var base_price = 0;
function CalculatePrice() {
var base_cost = base_price;
$(".quote--price:checked").each(function() {
base_cost += $(this).data("price");
});
$("#final_price").text(base_cost);
}
CalculatePrice();
$(".quote--price").click(function() {
CalculatePrice();
});

Parse your number
base_cost += parseFloat($(this).data("price"));
demo

Having trouble totaling value from steppers to total display

Hello I am trying to build this form that totals a quantity then multiplies, by a value and returns total.
Here is a codepen of what I have tried so far http://codepen.io/Ongomobile/pen/grZJvO Thanks so much for any help!
Here is my function so far
$(document).ready(function() {
$('.input-stepper').inputStepper();
});
$(".input-stepper").keyup(getTotals)
function getTotals() {
var subTotal = 0;
// for each div of steppers
$('.input-stepper').each(function() {
// get values from this div
var $val1 = $('.val1', this).val();
var $val2 = $('.val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.multTotal', this).text($total);
subTotal += $total;
});
$("#grandTotal").text(subTotal);
}

Your code is working properly, however, I'm assuming you're expecting clicking on the + and - to change the total as well. Right now you're only listening to the keyup event on the inputs themselves. You also need to add a click handler on the buttons such as:
$(".input-stepper button").mouseup(getTotals);
Note that you should find a more efficient jQuery selector for the buttons though (such as adding them to a class and selecting that directly rather than the nested jQuery reference).

I think you are using jquery.input-stepper.js
this Js documentation states that if you want execute any function on "+/-" button you need to use
$('input[type="text"]').on('increase', function (e, amount, plugin) {
alert('increase with: ' + amount);
});
$('input[type="text"]').on('decrease', function (e, amount, plugin) {
alert('decrease with: ' + amount);
});

How to add up values of checkboxes in real time using JQuery?

Should be easy, but this code isn't working for me:
$("#checkboxdiv input:checkbox").change(function() {
var total = 0;
$('#checkboxdiv input:checkbox:checked').each(function() {
total += parseInt(this.value, 10);
});
$('#totalsdiv').text(total);
});
The checkboxes to consider are all in the #checkbox div, and I'm trying to fill in the div with the total amount.
Thanks.

As the code is fine and works, it's probable there is an unrelated error elsewhere.
You should use the developer tools to debug and hunt it.

You could try to listen for the click event on the CheckBox, instead of the change event.

Without knowing your problem I'll guess at this
$("#checkboxdiv input:checkbox").change(function() {
var total = 0;
$('#checkboxdiv input:checkbox:checked').each(function() {
total += parseInt($(this).val(), 10);
});
$('#totalsdiv').text(total);
});

Adding up a load of input boxes

This may have been answered before, but I cannot find a solution that works.
I need to add the subtotal input boxes up and output them as a grandTotal. Sounds simple, and I thought it would be, but for some reason I cannot get it to function properly.
To save time I have created a jsFiddle - http://jsfiddle.net/wgrills/hKxgU/4/
Edit: Sorry to be poor at posting the question.
I missed out most of the items because I wanted to speed the jsfiddle up. I have updated the jsFiddle - http://jsfiddle.net/wgrills/hKxgU/7/.
If you click on the + or - buttons the subtotal changes, that is all good. But I can't get the #grandTotal input to update. The problem appears to be with the:
var grandTotal = 0;
$(".subtotal").each(function() {
$(this).css("border-color","#f00");
grandTotal += $(this).val.split("£")[1];
});
$("#grandTotal").val("£" + grandTotal);
alert(grandTotal);
part of the js. Note the css border change and the alert is just there for me to make sure the script is working.
The code is all early days, this is just a quick mock up.

You gave two problems, very easy to solve!
You are correct that the piece above that you posted is part of the problem. In particular the line:
grandTotal += $(this).val.split("£")[1];
You missed the () after val, so the code WOULD have broken here, because it doesn't know what .val. is.
Also, the code you posted was after a return false; this effectively tells the function is has finished, don't bother doing anything after that line.
However, as you need that section of code in both functions (clicks) its worth wrapping it in a function of its own:
function updateGrandTotal() {
var grandTotal = 0;
$(".subtotal").each(function() {
$(this).css("border-color", "#f00");
grandTotal += parseFloat($(this).val().split("£")[1]);
});
$("#grandTotal").val("£" + grandTotal);
alert(grandTotal);
}
And calling it just before you inform the function its finished:
updateGrandTotal();
return false;
See it partially working here
However, while this will work on the plus of an item, you have another problem, when you are minusing an item, and the box gets to zero, instead of setting £0.00 you set it to 0, hence when it try's to split on the "£" it can't. To combat this simply copy the bit where you turn your price value into a price from the plus function into the minus function:
Replace:
newprice = price * x;
$('#' + update).val(x);
$('#' + update + '_subtotal').val(newprice);
With the working version:
newprice = (price * x) / 100;
newprice = newprice.toFixed(2);
newprice = '£' + newprice;
$('#' + update).val(x);
$('#' + update + '_subtotal').val(newprice);
See it fully working here

Your problem is with the following line:
grandTotal += $(this).val.split("£")[1];
val is a function, not a property on the returned object. You want the following instead:
grandTotal += $(this).val().split("£")[1];
Also in your fiddle you have a return false; in the middle of your function, which lies above the code you're calling val incorrectly on. Remove that return as well.