Question: 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.

Answer: 
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[`
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;
}

```