Dynamically calculate input with jquery

Question

Good afternoon, I have a dynamically input 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; }

That by clicking new, inserts into the chosen div, all inputs that are programmed and activates maskmoney and updates the value in the item input

<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 am trying to make that by pressing the TAB or performing an onblur Event that in case is to take the cursor from the last input that is the value, it captures the amount in the previous input which is the Quant and multiplies by the value within it which is the val and updates the value of it by multiplying the quantity by the value inside it

that is to say

i type a quantity in the input Uant and hit the tab to go to the val and type the value inside it and hit the tab to go to the next input and in this event exit the input val, jquery read the quantity inside the Quantity multiply by the value inside the val and update the val with this new value by deleting the unit value and placing the value multiplied by the quantity

more or less what happens in this example http://jsfiddle.net/QBTN6/2/ but without the third input. grateful

Edit:

I found this code that I modified a little bit and I got almost there, that’s almost what this one 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 change v += paseFloat(i); for v *= paseFloat(i); that is, it does not multiply, just sum

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

Probelma three, how to make it work on dynamic inputs

Edit

With the help of @Leo Caracciolo I managed to reach 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('.',','); } }); }

wish I could do the same using classes like in jquery $('teste_de_calculo resultado').value I know, I don’t really like Ids and run the calculation without having to exactly do Check, like, do it alone after the last change, example, I typed 3.90 ai in 0 it counts for about 3 seconds and changes the value without doing Check.

Answer 1

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