Sum a list of text boxes in jQuery

javascript, jquery

Solution

I would suggest giving a common class to your quantity fields such that:

<input type="text" class="quantity" onblur="calculateTotal();" />

Then you would be able to define the following function with jQuery:

function calculateTotal() {
    var total = 0;

    $(".quantity").each(function() {
        if (!isNaN(this.value) && this.value.length != 0) {
            total += parseFloat(this.value);
        }
    });

    $("#total_quantity").val(total);
}

The `onblur` event will fire each time the focus is shifted from the quantity fields. In turn, this will call the `calculateTotal()` function.

If you prefer not to add a common class, you can use the `$("input[id^='Quantity[']")` selector, as Felix suggest in the comment below. This will match all the text boxes that have an id starting with: `Quantity[`

Problem

I have a form in which there are textbox(s) added dynamically using jquery. The textbox ids is formed as an array, i.e. Quantity[0], Quantity[1], Quantity[2] ... I want to add the numbers in these textbox(s) and display the value in another textbox named "total_quantity" preferably when the focus is shifted out of the array textbox. How can I do it? I dont mind using jQuery or plain javascript, which ever is easier.

Original source