sumar inputs con jquery

publicado por: Anonymous

tengo un formulario en html y necesito que los inputs se vayan sumando cuando se va agregando valor a ellos (pierda el focus), lo he intentado con una clase de esta manera

introducir la descripción de la imagen aquí

function calcular_total() {

    var importe_total = 0
    $('.amt').keyup(function (){
        $(".amt").each(
            function(index, value) {
                importe_total = importe_total + eval($(this).val());
                console.log(importe_total);
            }
        );  
    });
    $("#inputTotal").val(importe_total);
} 

la funcion es llamada en el documen ready

$(document).ready(function(){

    calcular_total();

});

html

<table>
        <tr>
            <td style="width:25%;">Costos Servicios</td>
            <td style="width:25%;"><input type="text" id="inputCostosServicios" class="solo-numero amt" style="width:70% !important; text-align:right"/></td>
            <td style="width:25%;">Costo Logistica</td>
            <td style="width:25%;"><input type="text" id="inputCostoLogistica" class="solo-numero amt" style="width:70% !important; text-align:right"/></td>
        </tr>
        <tr>
            <td style="width:25%;">Costo Infraestructura</td>
            <td style="width:25%;"><input type="text" id="inputCostoInfraestructura" class="solo-numero amt"  style="width:70% !important; text-align:right"/></td>
            <td style="width:25%;">Costo  Contingencia</td>
            <td style="width:25%;"><input type="text" id="inputCostoContingencia" class="solo-numero amt" style="width:70% !important; text-align:right"/></td>
        </tr>
        <tr>
            <td style="width:25%;">Costo Licencias</td>
            <td style="width:25%;"><input type="text" id="inputCostoLicencias" class="solo-numero amt" style="width:70% !important; text-align:right"/></td>
            <td style="width:25%;">Otros Costos</td>
            <td style="width:25%;"><input type="text" id="inputOtrosCostos1" style="width:70% !important; text-align:right"/></td>
        </tr>
        <tr>
            <td colspan="4"><div style="text-align:right; margin-right:7%;"><label style="margin-right:8px;">Total</label><input type="text" id="inputTotal" class="solo-numero" style="width:18% !important; margin-right:-2px; text-align:right"/></div></td>

        </tr>
    </table>

solución

Algunos temas importantes:

  • $("#inputTotal").val(importe_total); estaba fuera de la función keyup al igual que importe_total
  • los input deben tener un valor por defecto de cero(para evitar errores).
  • se debe validar que los dígitos introducidos sean números (verificar números validos).

_x000D_

_x000D_

$('.amt').keyup(function() {_x000D_
var importe_total = 0_x000D_
  $(".amt").each(_x000D_
    function(index, value) {_x000D_
      if ( $.isNumeric( $(this).val() ) ){_x000D_
      importe_total = importe_total + eval($(this).val());_x000D_
      //console.log(importe_total);_x000D_
      }_x000D_
    }_x000D_
  );_x000D_
      $("#inputTotal").val(importe_total);_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>_x000D_
<table>_x000D_
  <tr>_x000D_
    <td style="width:25%;">Costos Servicios</td>_x000D_
    <td style="width:25%;">_x000D_
      <input type="text" id="inputCostosServicios" class="solo-numero amt" style="width:70% !important; text-align:right" value="0" />_x000D_
    </td>_x000D_
    <td style="width:25%;">Costo Logistica</td>_x000D_
    <td style="width:25%;">_x000D_
      <input type="text" id="inputCostoLogistica" class="solo-numero amt" style="width:70% !important; text-align:right" value="0" />_x000D_
    </td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td style="width:25%;">Costo Infraestructura</td>_x000D_
    <td style="width:25%;">_x000D_
      <input type="text" id="inputCostoInfraestructura" class="solo-numero amt" style="width:70% !important; text-align:right" value="0" />_x000D_
    </td>_x000D_
    <td style="width:25%;">Costo Contingencia</td>_x000D_
    <td style="width:25%;">_x000D_
      <input type="text" id="inputCostoContingencia" class="solo-numero amt" style="width:70% !important; text-align:right" value="0" />_x000D_
    </td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td style="width:25%;">Costo Licencias</td>_x000D_
    <td style="width:25%;">_x000D_
      <input type="text" id="inputCostoLicencias" class="solo-numero amt" style="width:70% !important; text-align:right" value="0" />_x000D_
    </td>_x000D_
    <td style="width:25%;">Otros Costos</td>_x000D_
    <td style="width:25%;">_x000D_
      <input type="text" id="inputOtrosCostos1" style="width:70% !important; text-align:right" value="0" />_x000D_
    </td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td colspan="4">_x000D_
      <div style="text-align:right; margin-right:7%;">_x000D_
        <label style="margin-right:8px;">Total</label>_x000D_
        <input type="text" id="inputTotal" class="solo-numero" style="width:18% !important; margin-right:-2px; text-align:right" />_x000D_
      </div>_x000D_
    </td>_x000D_
_x000D_
  </tr>_x000D_
</table>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.