获取具有相同父div的所有文本框的值并显示sum

Question

I have two div of same class name and each div contains 5 input fields, 4 of them input fields and fifth one is for showing the sum. Can someone help me in writing a JavaScript which triggers the onblur(), but get the amounts from the input fields of that div only and show the sum in its Total. The Problem is all the input fields have same class name and even both div have same names so how will i differentiate between them. I cant give them ids because i am generating it from a generic loop, the loop gets the data from the database and executes itself for the number of results from database.

<div class="feerow">
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="8" data-clsec="345" />
    </div>
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="9" data-clsec="345" />
    </div>
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="10" data-clsec="345" />
    </div>
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="11" data-clsec="345" />
    </div>
    <div class="feetext">
        <input class="amount" type="text" id="total" readonly="" disabled="disabled" />
    </div>
</div>
<div class="feerow">
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="8" data-clsec="346" />
    </div>
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="9" data-clsec="346" />
    </div>
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="10" data-clsec="346" />
    </div>
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="11" data-clsec="346" />
    </div>
    <div class="feetext">
        <input class="amount" type="text" id="total" readonly="" disabled="disabled" />
    </div>
</div>

Answer 1

Here's an example using plain javascript. I couldn't be bothered to test it in multiple browsers, but it seems to work fine in Chrome. Basically, whenever someone types something (you can use the input event instead of the blur event for more immediate results) it adds up all the numbers in the row and displays them in the total. I added a bit of code to format the result as dollars since it looked like you're dealing with money.

 function sumRow(row) { var fees = row.querySelectorAll("input:not(:disabled)"), total = Array.prototype.reduce.call(fees, function(sum, input) { return sum + (parseFloat(input.value) || 0); }, 0), formatted; if (total) { formatted = "$" + Math.round(100 * total); formatted = formatted.substr(0, formatted.length - 2) + "." + formatted.substr(-2); } else { formatted = "$0.00"; } row.querySelector("input:disabled").value = formatted; } document.addEventListener("input", function(e) { sumRow(e.target.parentElement.parentElement); }); window.addEventListener("load", function onLoad() { window.removeEventListener(onLoad); Array.prototype.forEach.call(document.querySelectorAll(".feerow"), sumRow); }); 

 <div class="feerow"> <div class="feetext"> <input class="amount" type="text" data-feetype="8" data-clsec="345" /> </div> <div class="feetext"> <input class="amount" type="text" data-feetype="9" data-clsec="345" /> </div> <div class="feetext"> <input class="amount" type="text" data-feetype="10" data-clsec="345" /> </div> <div class="feetext"> <input class="amount" type="text" data-feetype="11" data-clsec="345" /> </div> <div class="feetext"> <input class="amount" type="text" id="total" readonly="" disabled="disabled" /> </div> </div> <div class="feerow"> <div class="feetext"> <input class="amount" type="text" data-feetype="8" data-clsec="346" /> </div> <div class="feetext"> <input class="amount" type="text" data-feetype="9" data-clsec="346" /> </div> <div class="feetext"> <input class="amount" type="text" data-feetype="10" data-clsec="346" /> </div> <div class="feetext"> <input class="amount" type="text" data-feetype="11" data-clsec="346" /> </div> <div class="feetext"> <input class="amount" type="text" id="total" readonly="" disabled="disabled" /> </div> </div>