Tengo entradas en bucle usando thymeleaf, necesito cuando desplace cada iteración obtener el valor y calcular la suma
<tr th:each="person : ${persons}"> <td th:text="${person.first_name}"></td> <td th:text="${person.last_name}"></td> <td th:text="${person.phone}"></td> <td><input id="age" class="form-control" type="text" name="age" th:field="*{ages}"> </td> </tr> Total : <input type="text" name="sum" id="sum"/>Mi script js:
<script type="text/javascript"> $(document).ready(function(){ $("#age").each(function() { $(this).on('input', function(){ calculateSum(); }); console.log("sum :"+sum); }); }); function calculateSum() { var sum = 0; $("#age").each(function() { if(!isNaN(this.value) && this.value.length!=0) { sum += parseFloat(this.value); } }); $("#sum").html(sum.toFixed(2)); } </script>Mi código me da en total solo el primer valor (como si no funcionara en la segunda iteración), ¡no sé por qué!
Los ID deben ser únicos en una página; como tal, los selectores de ID generalmente solo devuelven el primer elemento con esa ID. Deberías usar clases en su lugar.
<input class="age" class="form-control" type="text" name="age">Sus selectores deberían convertirse en:
$(".age").each(function(){ // ... });