Calculate input dynamically with jquery

2

Good afternoon, I have a dynamically inserted input code

function new_input() {
        $('<x>'
            + '<input class="cod" id="focus' + rscn +'" placeholder="Código" />'
            + '<input class="desc" placeholder="Descrição" />'
            + '<div class="div"></div>'
            + '<input class="quant" placeholder="Quantidade" />'
            + '<input class="val" placeholder="Valor" />'
            + '<span id="remove_item" class="remove cursor_pointer display_none">+</span>'
        + '</x>').prependTo(scntDiv);
        $('#focus' + rscn).focus();
        rscn++;
        contar_mais('itens_total');
        mask_money();
        return false; }

When you click on new, it inserts into the chosen div all the inputs that are programmed and activates maskmoney and updates the value in the input of items

<div id='more_item_add' class='button cursor_pointer display_none'>Novo</div>
<div id='more_item'></div>
<input id='itens_total' class='itens_total' value='0' readonly='readonly' />

I'm trying to do that by tightening the TAB or holding an onblur event that in the case is taking the cursor off the last input that is the value, it captures the amount in the previous input which is the quant and multiply by the value inside of the same that is the val and update the value of it with the multiplication of the quantity by the value inside it

ie

I type a quantity in the input quant and press the tab to go to the val and type the value inside it and press the tab to go to the next input and in this event to leave the input val, jquery read the quantity inside of the quant multiply by the value inside the val and update the val with this new value by erasing the unit value and placing the value multiplied by the quantity

more or less what happens in this example link but without the third input. grateful

Edit:

I found this code that I modified a lot and I got almost there, it's almost what this does

<input class='teste_de_calculo resultado' />
<input class='teste_de_calculo calcula' />

<script>
$('input.teste_de_calculo.calcula').on('blur', function() {
  var v = 0;
  $('input.teste_de_calculo').each(function(i,e) {
    if ($(e).val()) {
      var i = $(e).val().replace(/\,/g,'.');
      if (isNaN(i)) { $(e).val(''); return; }
      v += parseFloat(i);
      $('input.teste_de_calculo.resultado').val(v.toFixed(2)); } }); });
</script>

Problem one of this code, it does not work if you switch from v + = passeFloat (i); for v * = passFloat (i); that is, it does not multiply, it only adds

Problem two, only works in input 1 does not work in input 2

Probelma three, how to make it work on dynamic inputs

edit

With the help of @Leo Caracciolo I got to almost solution, the code then stayed in this format

function auto_calc_quant() {
    $('.val').blur(function() {
        $(this).val($(this).val().replace(',','.').replace(/[^0-9\.]/g,''));
        var a = Number(document.getElementById('teste_de_calculo quantidade').value);
        var b = Number(document.getElementById('teste_de_calculo resultado').value);
        if((a != '') && (b != '')) {
            var c = document.getElementById('teste_de_calculo resultado').value = parseFloat(a * b).toFixed(2).replace('.',','); } }); }

I wanted to be able to do the same using classes as in jquery $('teste_de_calculo resultado').value know la, I do not really like IDs and execute the calculation without exactly doing blur, type, do it alone after the last change, example, I typed 3.90 ai at 0 it counts for 3 seconds and changes the value without blur.

    
asked by anonymous 05.04.2017 / 19:55

1 answer

2

With keyup event

 $(document).ready(function() {
   $('.somente-numero').keyup(function (e) {
	$(this).val($(this).val().replace(/[^0-9\.]/g,''));
	  var v1 = Number(document.getElementById("teste_de_calculo resultado").value);
          var v2 = Number(document.getElementById("teste_de_calculo calcula").value);
            if ((v1 !="")&&(v2 !="")){
              var v3 = document.getElementById("teste_de_calculo calcula").value = parseFloat(v1 * v2).toFixed(2);
            }
   });
 });
<script src="http://code.jquery.com/jquery-1.8.3.min.js"type="text/javascript"></script>

<input class="somente-numero" id='teste_de_calculo resultado' />
<input class="somente-numero" id='teste_de_calculo calcula' />

With blur event

 $(document).ready(function() {
   $('.somente-numero').blur(function (e) {
	$(this).val($(this).val().replace(/[^0-9\.]/g,''));
	  var v1 = Number(document.getElementById("teste_de_calculo resultado").value);
          var v2 = Number(document.getElementById("teste_de_calculo calcula").value);
            if ((v1 !="")&&(v2 !="")){
              var v3 = document.getElementById("teste_de_calculo calcula").value = parseFloat(v1 * v2).toFixed(2);
            }
   });
 });
<script src="http://code.jquery.com/jquery-1.8.3.min.js"type="text/javascript"></script>

<input class="somente-numero" id='teste_de_calculo resultado' />
<input class="somente-numero" id='teste_de_calculo calcula' />

Category: Events

    
05.04.2017 / 22:24