2

O script abaixo funciona somente para o primeiro bloco ao se digitar a quantidade.

Existe algum modo da função realizar o calculo dependendo do bloco em que se digita a quantidade.

$(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>
<!-- bloco 1 -->
<label>preço</label> <input type="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 -->

2
  • Leo, os inputs possuiram mesmo nome (exemplo: name="quantidade")? Commented 26/12/2017 às 13:05
  • @CaiqueRomero, os names são diferentes, editei a pergunta
    – user60252
    Commented 26/12/2017 às 13:32

3 Respostas 3

1

Uma solução sem alterar nada no seu HTML é pegando o index do campo digitado pelo name e jogando o valor no campo total de mesmo index.

O e.target.name.split('[').pop() irá retornar ou valor_org] ou quantidade], que já é suficiente para saber o index do elemento que está sendo digitado usando input[name*=, que seleciona o campo que contém uma das strings acima no name.

Obs.: o parseFloat se torna desnecessário, já que os valores foram convertidos em Number() anteriormente.

$(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>
<!-- bloco 1 -->
<label>preço</label> <input type="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 />

1
  • 1
    +1 Boa observação Commented 26/12/2017 às 18:17
1

Consegui lá com os brothers dessa forma e vou publicar aqui porque achei interessante.

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

<!-- bloco 1 -->
<label>preço</label> <input type="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 />

1

Primeiro eu coloquei um nome igual para todos os input e adicionei diferentes classes para cada bloco.

Na função eu identifico a qual classe(bloco) pretence o input alterado e assim sei que o total daquele bloco deve ser atualizado.

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

<!-- bloco 1 -->
<div>
  <label>Preço</label> 
  <input type="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>

Você deve fazer log-in para responder a esta pergunta.