Summe einer Liste von Textfeldern in jQuery

Question

Ich habe ein Formular, in dem es Textbox (s) dynamisch mit Jquery hinzugefügt werden. Die Textbox ids wird als ein Array gebildet, d.h. Menge[0], Menge[1], Menge[2] ...

Ich möchte die Zahlen in diesen Textfeldern addieren und den Wert in einem anderen Textfeld mit dem Namen "total_quantity" anzeigen, vorzugsweise wenn der Fokus aus dem Array-Textfeld verschoben wird.

Wie kann ich das tun? Ich habe nichts dagegen, jQuery oder einfaches Javascript zu verwenden, was immer einfacher ist.

Answer 1

Ich würde vorschlagen, Ihren Mengenfeldern eine gemeinsame Klasse zu geben, so dass:

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

Dann könnten Sie die folgende Funktion mit jQuery definieren:

function calculateTotal() {
    var total = 0;

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

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

El onblur Ereignis wird jedes Mal ausgelöst, wenn der Fokus von den Mengenfeldern verschoben wird. Dies wiederum ruft die Funktion calculateTotal() Funktion.

---

Wenn Sie es vorziehen, keine gemeinsame Klasse hinzuzufügen, können Sie die $("input[id^='Quantity[']") Selektor, wie Felix in seinem Kommentar unten vorschlägt. Dies wird mit allen Textfeldern übereinstimmen, die eine ID haben, die mit: Quantity[

Answer 2

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

Answer 3

Verwenden Sie die folgende Funktion, wenn Sie document.getElementsByName() nicht verwenden können, da einige MVC-Frameworks wie Struts und Spring MVC das Attribut name eines Textes verwenden, um das Element an ein Backend-Objekt zu binden.

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