Skip to main content
removeu 10 caracteres do conteúdo
Fonte Link
Caique Romero
  • 7,2mil
  • 2
  • 24
  • 51

Primeiro eu coloquei um nome igual para todos os inputinput 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(parseFloat(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>

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

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>

Fonte Link
Caique Romero
  • 7,2mil
  • 2
  • 24
  • 51

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