Sum a list of text boxes in jQuery

Question

I have a form in which there are textbox(s) added dynamically using jquery. The textbox ids is formed as an array, ie 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.

Answer 1

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[

Answer 2

var Total = 0;
$("input[id^='Quantity[']").each(function() { Total += $(this).val()|0; });
$("#total_quantity").val(Total);

Answer 3

Use the following function, if one can't use document.getElementsByName(), as some MVC frameworks such as Struts and Spring MVC use the name attribute of a text to bind the element to a backend object.

function getInputTypesWithId(idValue) {
    var inputs = document.getElementsByTagName("input");
    var resultArray = new Array();

    for ( var i = 0; i < inputs.length; i++) {
        if(inputs[i].getAttribute("id") == idValue) {
            resultArray.push(inputs[i]);
        }
    }
    return resultArray;
}