Calculating items sales order jquery

Question

Calculating items sales order jquery

Navigation

#1 by (0 votes)

1

I have a problem that I can not solve. I have a sales order screen where it has to do the quantity calculation X unit value = (fill in the total value and add up to the total of the order), how do I To do this calculation with jquery someone can help me follow part of the code below.

<table id="table-itens" class="table table-bordered table-hover table-striped">
	<thead>
		<tr class='info'><th colspan='6'>Itens do pedido de venda</th></tr>
		<th class="th_codigo">Produto</th> 
		<th>Quantidade</th>   
		<th class="th_unitario">Valor Unit.</th>
		<th class="th_total">Total</th>
	</thead>
	<tbody>
		<tr id='line1' >
			<td><input type='text' class='form-control input-sm codigo' value='29832' disabled /></td>
			<td class='class_quant'> <input class='form-control input-sm codigo' type='text'  name='ITEMARRAY[1][quantidade]' value=''  id='qtn02'   required/></td>
			<td class='class_unit'>   <input class='form-control input-sm vlr_unitario' type='tel' name='ITEMARRAY[1][vlr_unitario]' id='valor_unitario03'   required /></td>
			<td class='class_total'> <input class='form-control input-sm total' type='text'    name='ITEMARRAY[1][total]'       id='total02' readonly='readonly' /></td>
		</tr>
		<tr id='line2' >
			<td><input type='text' class='form-control input-sm codigo' value='29835' disabled /></td>
			<td class='class_quant'> <input class='form-control input-sm codigo' type='text'  name='ITEMARRAY[3][quantidade]'   value=''  id='qtn02'   required/></td>
			<td class='class_unit'>   <input class='form-control input-sm vlr_unitario' type='tel' name='ITEMARRAY[3][vlr_unitario]' id='valor_unitario03'   required /></td>
			<td class='class_total'> <input class='form-control input-sm total' type='text'    name='ITEMARRAY[3][total]'       id='total02' readonly='readonly' /></td>
		</tr>
		<tr class='info'>
			<td colspan='3'></td>
			<td class='total' colspan='2'><b>Total do pedido R$ : </b></td>
			<td><div id='total'><span class='value_total'></span> </div></td>
		</tr>
	</tbody>
</table>

My jquery code is like this, the same is already calculating the values of the lines but I can not fill in the total value of the line just by going over the field has some automatic way of doing this when filling the quantity and unit value it ja Does the total of the line trigger and sum in total?

$(window).ready(function () {
        $('#table-itens tr td.class_quant').keyup(function () {
            var quantidade = $(this).find('#qtn02').val();
            $('#table-itens tr td.class_unit').keyup(function () {
                valor_unitario = $(this).find('#valor_unitario03').val();
                var total = (quantidade * valor_unitario);
                $('#table-itens tr td.class_total').keyup(function () {
                    $(this).find('#total02').attr('value', total);
                });
            });
        });
    });

jquery html5 trigger

asked by anonymous 31.05.2016 / 20:19

1 answer

Postcards with background image and dynamic text in php, for emailing [closed] jQuery does not update the input values "live"

score 0 · Accepted Answer

One way would be to monitor the quantity and unit value fields and when there is an action, go through all fields and calculate the values:

First, put a specific class for the quantity field, in your html the fields of the code and quantity are with the same class codigo .

Example:

  //Quando houver alguma ação nos campos quantidade ou valor unitario
  $('.qtd, .vlr_unitario').on('change blur keyup',function(){
    $('.qtd').each(function(){//percorre todos os campos de quantidade
      //quantidade
      var qtd = $(this).val();
      //pega o valor unitário
      var vlr = $(this).parent('td').siblings('td.class_unit').children('.vlr_unitario').val();
      // coloca o resultado no valor total
      $(this).parent('td').siblings('td').children('.total').val(qtd * vlr);
    });
    //Soma o valor total do pedido
    var total = 0;
    $('.total').each(function(){
      if($(this).val()){
        total += parseFloat($(this).val());
        $('.value_total').html(total);
      }
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="table-itens" class="table table-bordered table-hover table-striped">
	<thead>
		<tr class='info'><th colspan='6'>Itens do pedido de venda</th></tr>
		<th class="th_codigo">Produto</th> 
		<th>Quantidade</th>   
		<th class="th_unitario">Valor Unit.</th>
		<th class="th_total">Total</th>
	</thead>
	<tbody>
		<tr id='line1' >
			<td><input type='text' class='form-control input-sm codigo' value='29832' disabled /></td>
			<td class='class_quant'> <input class='form-control input-sm qtd' type='text'  name='ITEMARRAY[1][quantidade]' value=''  id='qtn02'   required/></td>
			<td class='class_unit'>   <input class='form-control input-sm vlr_unitario' type='tel' name='ITEMARRAY[1][vlr_unitario]' id='valor_unitario03'   required /></td>
			<td class='class_total'> <input class='form-control input-sm total' type='text'    name='ITEMARRAY[1][total]'       id='total02' readonly='readonly' /></td>
		</tr>
		<tr id='line2' >
			<td><input type='text' class='form-control input-sm codigo' value='29835' disabled /></td>
			<td class='class_quant'> <input class='form-control input-sm qtd' type='text'  name='ITEMARRAY[3][quantidade]'   value=''  id='qtn02'   required/></td>
			<td class='class_unit'>   <input class='form-control input-sm vlr_unitario' type='tel' name='ITEMARRAY[3][vlr_unitario]' id='valor_unitario03'   required /></td>
			<td class='class_total'> <input class='form-control input-sm total' type='text'    name='ITEMARRAY[3][total]'       id='total02' readonly='readonly' /></td>
		</tr>
		<tr class='info'>
			<td colspan='3'></td>
			<td class='total' colspan='2'><b>Total do pedido R$ : </b></td>
			<td><div id='total'><span class='value_total'></span> </div></td>
		</tr>
	</tbody>
</table>

Note: This is a suggestion to get an idea of how to do, I did not treat the fields to test values or to round off.