添加大量输入框

Question

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.

Answer 1

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

Answer 2

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.