Calculation between two inputs and result in another

Navigation
2

The script below works only for the first block when you enter the quantity.

There is some way for the function to perform the calculation depending on the block in which the quantity is entered. 

$(document).ready(function() {
  $('.somente-numero').keyup(function (e) {
     $(this).val($(this).val().replace(/[^0-9\.]/g,''));
     var v1 = Number(document.getElementById("v1").value);
     var v2 = Number(document.getElementById("v2").value);
     var v7 = document.getElementById("v7").value = parseFloat(v1 * v2).toFixed(2);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--bloco1--><label>preço</label><inputtype="text" class="somente-numero" name="produto_solicitado[0][valor_org]" id="v1" size="10" value="100.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[0][quantidade]" id="v2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[0][valor_total_prod]" id="v7" size="10" readonly />

<br>

<!-- bloco 2 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="200.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly />

 <!-- bloco 3 -->

 .................

 <!-- bloco n -->
    
asked by anonymous 26.12.2017 / 13:46

3 answers

1

A solution without changing anything in your HTML is by taking the% w / o of the field typed by index and throwing the value in the total field of same index .

The name will return either e.target.name.split('[').pop() or valor_org] , which is enough to know the index of the element being typed using quantidade] , which selects the field that contains one of the strings above in input[name*= .

  

Note: name becomes unnecessary since values have been converted to parseFloat previously. 

$(document).ready(function() {
   $('.somente-numero').keyup(function (e) {
      $(this).val($(this).val().replace(/[^0-9\.]/g,''));
      // aqui eu pego o index
      var idx = $('input[name*="'+e.target.name.split('[').pop()+'"]').index(this);
      var v1 = Number($($('input[name*="[valor_org]"]')[idx]).val());
      var v2 = Number($($('input[name*="[quantidade"]')[idx]).val());
      $($('input[name*="[valor_total_prod]"]')[idx]).val((v1 * v2).toFixed(2));
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--bloco1--><label>preço</label><inputtype="text" class="somente-numero" name="produto_solicitado[0][valor_org]" id="v1" size="10" value="100.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[0][quantidade]" id="v2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[0][valor_total_prod]" id="v7" size="10" readonly />

<br>

<!-- bloco 2 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="200.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly />
    
26.12.2017 / 18:11
1

I got there with the brothers this way and I'll post it here because I found it interesting. 

$(document).ready(function () {
    $('.somente-numero').keyup(function (e) {
        var currentVal = $(this).val();
        var replaceD = currentVal.replace(/[^0-9\.]/g, '');
        $(this).val(replaceD);
        var v1 = Number($(this).prev().prev().val());
        var v2 = Number($(this).val());
        var calculatedval = parseFloat(v1 * v2).toFixed(2);
        $(this).next().next().val(calculatedval);
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--bloco1--><label>preço</label><inputtype="text" class="somente-numero" name="produto_solicitado[0][valor_org]" id="v1" size="10" value="100.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[0][quantidade]" id="v2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[0][valor_total_prod]" id="v7" size="10" readonly />

<br>

<!-- bloco 2 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="200.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly />

<br>

<!-- bloco 3 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="10.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly />
    
26.12.2017 / 18:46
1

First I put an equal name for all input and added different classes for each block.

In the function I identify which class (block) holds the modified input and so I know the total of that block should be updated. 

$(document).ready(function() {

 $('.somente-numero').keyup(function (e) {
	$(this).val($(this).val().replace(/[^0-9\.]/g,''));
  
  //Obtenho a qual bloco pertence o elemento alterado
  //Pegando a segunda classe do elemento
  var classeBloco = $(this).attr("class").split(' ')[1];
  
  //Obtenho o total daquele bloco
  var $total = $(".total"+classeBloco);

  //Obtenho o preço daquele bloco
  var $preco = $("input."+classeBloco+"[name='preco']").val();
  
  //Obtenho a quantidade daquele bloco
  var $qtd = $("input."+classeBloco+"[name='quantidade']").val();

  $total.val((Number($preco) * Number($qtd)).toFixed(2));
  
 });
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--bloco1--><div><label>Preço</label><inputtype="text" class="somente-numero bloco1" name="preco" size="10" value="100.00"/> 

  <label>quantidade</label>
  <input type="text" class="somente-numero bloco1" name="quantidade" size="10"/> 

  <label>total</label> 
  <input type="text" name="total" class="totalbloco1" size="10" readonly />
</div>

<!-- bloco 2 -->
<div>
  <label>Preço</label> 
  <input type="text" class="somente-numero bloco2" name="preco" size="10" value="200.00"/> 

  <label>quantidade</label> 
  <input type="text" class="somente-numero bloco2" name="quantidade" size="10"/> 

  <label>total</label> 
  <input type="text" name="total" class="totalbloco2" size="10" readonly />
</div>

<!-- bloco 3 -->
<div>
  <label>Preço</label> 
  <input type="text" class="somente-numero bloco3" name="preco" size="10" value="200.00"/> 

  <label>quantidade</label> 
  <input type="text" class="somente-numero bloco3" name="quantidade" size="10"/> 

  <label>total</label> 
  <input type="text" name="total" class="totalbloco3" size="10" readonly />
</div>
    
26.12.2017 / 14:18
C ++ std :: string.c_str () always returning NULL send login information to the bank for comparison