We Keep Coding

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);
});

Javascript word count price calculator

Everything works fine, except the problem with a pricing plan selection. What I want is that whenever user clicks on a specified price (even while the text is already present in textarea), it should immediately update the final Price. But it won't change at first click.
I should click twice on it instead. Any one got an idea what's wrong ?
So here how it looks like:
And here comes the javascript code:
function __textCalculatorCounter(){
var value = $('#calculateText').val();
var spanWords = $('#calculatedWordsTotal'),
spanChars = $('#calculatedCharsTotal'),
spanPrice = $('#calculatedPriceTotal');
if (value.length == 0) {
spanWords.html(0);
spanChars.html(0);
return;
}
var selectedPricing = $("input[name=calculatePrice]:checked").val();
var wordCount = value.trim().replace(/\s+/gi, ' ').split(' ').length;
var totalChars = value.length;
var totalPrice = (wordCount * parseFloat(Math.round(selectedPricing * 100) / 100));
spanWords.html(wordCount);
spanChars.html(totalChars);
spanPrice.html(totalPrice.toFixed(2));
}
function _initTextCalculator(){
var textblock = $('#calculateText');
textblock.change(__textCalculatorCounter);
textblock.keydown(__textCalculatorCounter);
textblock.keypress(__textCalculatorCounter);
textblock.keyup(__textCalculatorCounter);
textblock.blur(__textCalculatorCounter);
textblock.focus(__textCalculatorCounter);
$('label', '#pricesGroup').click(__textCalculatorCounter);
}
==== UPDATED ====
I don't know why, but it works fine in jsfiddle... it's exactly the same code extracted from html and javascript.
JSFIDDLE

So, since no one had an answer, I post mine, which solved the issue.
The problem is in Twitter's Bootstrap 3 radio button styles which is actually common issue when using along with javascript.
I've changed a click handler for radio buttons:
function _initTextCalculator(){
var textblock = $('#calculateText');
textblock.change(_textCalculatorTrigger);
textblock.keydown(_textCalculatorTrigger);
textblock.keypress(_textCalculatorTrigger);
textblock.keyup(_textCalculatorTrigger);
textblock.blur(_textCalculatorTrigger);
textblock.focus(_textCalculatorTrigger);
// Fixing bootstrap 3 radio buttons
$("#pricesGroup label").on('click', function(){
// Once clicked, mark current radio as checked
$('input:radio', this).prop("checked", true);
// Then call a function to calculate the price
_textCalculatorTrigger();
});
}
As it already commented, it assigns a property "checked" to radio button first once it's parent label tag is clicked, and then it calls a function to calculate the price.
Thanks to everyone

Checkbox checked add to cart

So I'm having some issues with my cart. Some jQuery issues and I was wondering if someone could point me in the right direction.
Thing is that I'm trying to make the cart more dynamic, if you check in a checkbox the item gets added to the cart and the total price and discount for that item is shown too.
Just having trouble with the checkbox part.
$(document).ready(function($){
$('#cart_listing .quantity').change(function (event) {
$quan = $(this);
console.log($quan.parent().next()[0]);
$quan.parent().next().find('.price').text(function () {
return $quan.val() * parseInt($(this).attr('data-val'), 10) + ' €';
});
var total = 0;
$('#cart_listing .price').each(function(k, v){
total += parseFloat($(v).text(), 10);
});
$('#cart_listing .faster').text(function () {
faster = parseInt($(this).attr('data-val'), 10);
return $(this).attr('data-val' + ' €');
});
var discount_pct = parseInt($("#cart_listing .discount").data("val"), 10);
var discount = -(total * discount_pct/100);
$('#cart_listing .discounted').text('-' + -discount + ' €');
$('#cart_listing #total').text(total + discount + faster + ' €')
});
});
jsFiddle: http://jsfiddle.net/ooh43u6t/

I don't understand your question correctly, but I think you want to add the value for the checkbox when checked using jQuery.
$('input[type=checkbox]').click(function(){
if($(this).is(':checked')){ //use this to see if the checkbox is checked or not
//do something...
}
});
I don't know if you wanted something like this. If not, can you clarify more? Thanks!
Edit:
So, you basically use the same thing, something like this perhaps,
if($(this).is(':checked')){
console.log($(this).parent('td').siblings('td').html()); // check this, you'll have the item name. (the first td)
console.log($(this).attr('data-val')); // this will have the value on the "data-val" attribute on your checkbox
}
So, now you have the name of the product (1st log) and the price (2nd log).
Now keep in mind that this would work only if the format is going to be consistent, and also instead of doing a generic input[type=checkbox], you might want to give all the product checkboxes a unique class, so it doesn't interfere with other checkboxes you might have. Hope this helps. If not, I'd be happy to answer some more. Thanks!

Iterate through appended items using jQuery

Question
I have a form that uses jQuery for magic. On that form is a button Add Account. That button appends fields Account and Amount and also another button Remove Account (which if you can guess, removes those two fields). This all works nicely...
On the same form there is another field Salary, which I would like to compare with the total of all the Amount fields. The problem is when I use jQuery's $.each() to iterate through the Amount fields it only recognizes those fields that were present in the DOM when the page loaded, and not the newly added fields.
How can I iterate through these appended Amount fields? (Or maybe there is a better to do this altogether?)
What I'm doing now:
$(document).ready(function(){
$('#form').on('keyup', '.amount', balanceAmountsWithSalary);
});
var balanceAmountsWithSalary = function(){
var salary = parseInt($('#salary').val(),10);
var total = 0;
$('#accounts .account').each(function(){
var amount = parseInt($(this).find('.amount').val(),10);
total += amount;
});
if (total === salary) {
$('#accounts .account').each(function(){
// Do some stuff to each input.amount located in div.account
});
} else {
$('#accounts .account').each(function(){
// Do some BAD stuff to each input.amount located in div.account
});
}
}
Thanks!
Answer
So it probably would've been more helpful to include the rest of my code at the outset as the problem was a simple error in the add account event. I mislabeled my container class adding an "s" to name of the appended items only. In any case thats for the comments! Posting an example on jsFiddle helped me find this error, so here is the thing in action in case you were wondering.

As HTML code and code of Dynamic adding inputs are not provided, I have edited an existing Fiddler to get total of dynamic added input field.
In this fiddler simple for loop is used to calculate total amount.
Here is a fiddler which might help you.
//button click get total
$('#GetTotal').click( function(event){
var tableID = "NewInvoiceTable";
GetTotalAmount(tableID);
return false;
});
//Get total
function GetTotalAmount(tableID)
{
var i = $('#' + tableID + ' tr').length;
alert("Total Rows -" + i);
var TotAmt = 0;
for(j=0;j<i;j++)
{
TotAmt += parseInt($('#TotalInline-' + j).val());
}
alert("Total Amount - " + TotAmt);
}

Getting NaN during calculation

I am trying to calculate the total of a selection of CDs in addition of P&P. The code I'm using is coming to a total of NaN?
Very confused here. what am I doing wrong?
function calculateTotal() {
var Collection method = document.getElementById('collection').value +
var select CDs = document.getElementById('selectCD').value;
var total = document.getElementById('total');
total.value = 'collection'(total) + 'selectCD'(total);
}
Here is a JSFiddle with the full code.

In your fiddle collection and selectCD are divs (not inputfields) containing inputfields. You can't do divElm.value.
Then the php-code in your fiddle would normally be able to output more then one cd, so you'd need to add the totals of the selected cd's to.
The minimum changes needed to get your code working are:
function calculateTotal(){
var coll = document.getElementsByName('deliveryType'),
cds = document.getElementsByName('cd[]'),
cdTot = 0,
L = coll.length;
while(L--){if(coll[L].checked){ //get shipping costs
coll=Number(coll[L].getAttribute('title')); break;
} }
L=cds.length;
while(L--){if(cds[L].checked){ //add total prices
cdTot += Number(cds[L].getAttribute('title'));
} }
// output total
document.getElementById('total').value = coll + cdTot;
}
Also you'd want to set some more triggers to function calculateTotal (from the shipping costs and selected cd's; this way, if they change, the total-field will update to).
See this working fiddle with these changes (and some other fixes) based on your fiddle so you can get motivated seeing it (calculation) in action.
However I do hope this is for a school-question and not for a live webshop. I would re-think my strategy as I think you are currently working your way to a big security hole.
Good luck!