add inputs with jquery

Question

add inputs with jquery

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I have a form in html and I need the inputs to be added when adding value to them (lose the focus), I've tried with a class in this way

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

the function is called in the ready document

$(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>

javascript jquery html5

asked by elsa 09.12.2016 в 18:33

source

2 answers

1

Well, you're calling a function calcular_total() , which inside is using a pulse function .keyup() therefore it will never work.

You can try with this onChange() detect any change in your input, when the user continues to write immediately they will see the changes in the total input. :

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 />

Another option that also fulfills the same function is that you leave your code as it is, unless the event keyup is not within a function but, that is within document.ready

Advice:

Save importe_total = importe_total + eval($(this).val()); by importe_total+= eval($(this).val());

answered by 09.12.2016 в 18:54

Does the finalize () method of a java class do exactly the same as the ondestroy () method for android? Error wanting to show an NSNumber value as Integer in a string

score 2 · Accepted Answer

Some important topics:

$("#inputTotal").val(importe_total); was outside the function keyup as well as importe_total
the input must have a default value of zero (to avoid errors).
must validate that the entered digits are numbers (check valid numbers ).

$('.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>