0

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>
4
  • calcular_total() no es necesaria por que no se ejecuta al momento de crearla en el ready, el código de tu función debe ir en el ready
    – Rene Limon
    Commented el 9 dic. 2016 a las 17:40
  • @ReneLimon lo he sacado y he puesto en el document ready y no ha funcionado, continua sin hacer nada
    – elsa
    Commented el 9 dic. 2016 a las 17:44
  • añade tambien el codigo html por favor
    – Rene Limon
    Commented el 9 dic. 2016 a las 17:46
  • @ReneLimon ya agregue el html :)
    – elsa
    Commented el 9 dic. 2016 a las 17:50

2 respuestas 2

4

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).

$('.amt').keyup(function() {
var importe_total = 0
  $(".amt").each(
    function(index, value) {
      if ( $.isNumeric( $(this).val() ) ){
      importe_total = importe_total + eval($(this).val());
      //console.log(importe_total);
      }
    }
  );
      $("#inputTotal").val(importe_total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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" value="0" />
    </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" value="0" />
    </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" value="0" />
    </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" value="0" />
    </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" value="0" />
    </td>
    <td style="width:25%;">Otros Costos</td>
    <td style="width:25%;">
      <input type="text" id="inputOtrosCostos1" style="width:70% !important; text-align:right" value="0" />
    </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>

2

Bueno, tu estas llamando a una funcion calcular_total(), que dentro esta utilizando una funcion de pulso .keyup() por lo tanto jamas va a funcionar.

Puedes probar con esto onChange() detecta cualquier cambio en tu input, cuando el usuario siga escribiendo inmediatamente se van a ver los cambios en el input total. :

function suma() {
      var add = 0;
      $('.cl').each(function() {
          if (!isNaN($(this).val())) {
              add += Number($(this).val());
          }
      });
      $('#sumAll').val(add);
  };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  Costos Servicios : <input id="Text1" class="cl" type="text" onChange="suma();" />
  <br />
  Costo Infraestructura : <input id="Text2" class="cl" type="text" onChange="suma();" />
  <br />
  Costo Licencias : <input id="Text3" class="cl" type="text" onChange="suma();" />
  <br />
  Total : <input id="sumAll" type="text" value="" />
  <br />

Otra opcion que tambien cumple el mismo funcionamiento es que dejes tu codigo tal como esta, salvo que el evento keyup no este dentro de una funcion sino, que este dentro del document.ready

Consejo :

Ahorrate importe_total = importe_total + eval($(this).val()); por importe_total+= eval($(this).val());

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.